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

【问题标题】：How can I remove input field from mat-datepicker and just show icon如何从 mat-datepicker 中删除输入字段并仅显示图标
【发布时间】：2021-08-16 06:02:55
【问题描述】：

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

我该怎么做？

<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>

【问题讨论】：

标签： javascript html angular datepicker

【解决方案1】：

只需使用“mat-menu”。在里面你可以放一个垫子日历。使用 [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>

【讨论】：