时间戳

首页 > 解决方案 > 如何在没有输入且仅使用日历图标的情况下使用日期选择器

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

问题描述

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

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

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

标签： angulartypescriptdatepicker

解决方案

您可以使用垫子菜单，并在垫子日历中，从此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>

推荐阅读