如何在没有输入且仅使用日历图标的情况下使用日期选择器答案

【问题标题】：how to use datepicker without Input and only with the calander icon如何在没有输入且仅使用日历图标的情况下使用日期选择器
【发布时间】：2020-04-21 11:57:17
【问题描述】：

我正在处理数据表过滤器，我想使用日历图标通过单击数据表标题来设置日期过滤器。

到那时，我已经在我的数据表标题上显示了一个日历图标，我想知道如何将它用作日期选择器？

我的 HTML：

<ng-container matColumnDef="Date">
  <mat-header-cell *matHeaderCellDef fxHide mat-sor t-header fxShow.gt-md>
    Date de l'opération
    <mat-icon>
      calendar_today
    </mat-icon>
  </mat-header-cell>

  <mat-cell *matCellDef="let element" fxHide fxShow.gt-md>
    <p class="category text-truncate">
      {{element.CreatedDateGmt}}
    </p>
  </mat-cell>
</ng-container>

【问题讨论】：

标签： angular typescript datepicker

【解决方案1】：

您可以使用 mat-menu，并在 mat-calendar 中，从此 SO 中删除 stopPropagation 的“div”...

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>calendar_today</mat-icon>
</button>
<mat-menu #appMenu="matMenu">
     <mat-calendar #calendar 
        (selectedChange)="select($event,calendar)" 
        [dateClass]="isSelected">
     </mat-calendar>
</mat-menu>

【讨论】：