如何从 mat-datepicker 中删除输入字段并仅显示图标

Question

我只想删除输入字段并仅显示日历图标。

我怎样才能做到这一点？

<div style="text-align:center">
    <input matInput [matDatepicker]="dp3" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
    <mat-label>View Calendar</mat-label>
</div>

Answer 1

只需使用“垫子菜单”。 你可以在里面放一个垫子日历。 使用 [selected] 和 (selectedChange) 给变量赋值

<button mat-icon-button [matMenuTriggerFor]="appMenu">
<mat-icon>calendar_today</mat-icon>
</button>
<mat-menu #appMenu="matMenu" >
      <mat-calendar style="width:15rem"  #calendar [selected]="date"
          (selectedChange)="date=$event">
      </mat-calendar>
</mat-menu>