如何在原生 HTML 元素中只显示日期图标？

Question

不确定是否可以只显示输入类型日期的图标。

<input type="datetime-local" id="test" name="test">

如下所示，我试图在 Angular material table 行中显示日期选择器（执行 *ngFor）并在单击日期图标时触发日期时间。

不知道删除或隐藏输入 border,mm/dd/yyyy 的确切 css 是什么 --:-- --
不确定如果我在找到合适的 css.css.

候补

经过大量搜索，找到了这个 alternate package 并实现了，但它在应用程序内部看起来很奇怪。

所以决定回去使用原生 html 元素。

谁能帮我看看如何只显示日期时间图标？

或者建议我 Angular 的日期时间选择器包？

感谢大家

Answer 1

补充我的评论

使用 ngbdatepicker

  <div
    ngbDropdown
    class="form-group"
    placement="bottom-rigth"
    #myDrop="ngbDropdown"
    (openChange)="open($event, dp)"
  >
    <div class="input-group">
      <button
        ngbDropdownToggle
        class="btn btn-outline-secondary calendar"
        type="button"
      ></button>
      <div ngbDropdownMenu>
        <ngb-datepicker
          #dp
          (select)="onDateSelection($event, myDrop)"
          [displayMonths]="2"
          [dayTemplate]="t"
          outsideDays="hidden"
        >
        </ngb-datepicker>
      </div>
    </div>
  </div>

使用 material 日期选择器

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>calendar_today</mat-icon>
</button>
<mat-menu #appMenu="matMenu" class="drop-calendar" >
    <div (click)="$event.stopPropagation()">
        <mat-calendar #calendar (selectedChange)="select($event,calendar)" ></mat-calendar>
    </div>
</mat-menu>

Answer 2

为了在 Chrome 开发人员工具中发现 -webkit 属性，我进入了设置 > 首选项 > 元素，然后选中“显示用户代理影子 DOM”。进行此更改后，我 selected datetime-local 元素并深入研究底层 div 伪元素，并通过将以下 CSS 添加到我的页面发现，我能够只显示日历图标。

input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    /* display: none;
    -webkit-appearance: none; */
    margin:0;
}
input[type="datetime-local"]::-webkit-datetime-edit {
    display:none;
}

结果是：，只显示日历图标，直到用户单击 select 一个日期。

如何在原生 HTML 元素中只显示日期图标？

How to Show only date icon in native HTML element?

html

javascript

angular-material

angular