时间戳

首页 > 解决方案 > Angular Material 10 日期范围选择器与 matDatepickerFilter

angular - Angular Material 10 日期范围选择器与 matDatepickerFilter

问题描述

Angular Material 10 MatDateRangeInput 可以与 matDatepickerFilter 一起使用吗？

如果我试试这个：

<mat-form-field appearance="outline">
  <mat-label>Label</mat-label>
  <mat-date-range-input [formGroup]="parent" [rangePicker]="picker">

    <input matStartDate formControlName="start"
           [matDatepickerFilter]="myFilter"
           readonly
           placeholder="Start">
    <input matEndDate formControlName="end"
           [matDatepickerFilter]="myFilter"
           readonly
           placeholder="End">

  </mat-date-range-input>

  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker touchUi #picker [disabled]="false"></mat-date-range-picker>

</mat-form-field>

错误是

NG8002: Can't bind to 'matDatepickerFilter' since it isn't a known property of 'input'.

标签： angularangular-material

解决方案

要在 mat-date-range-input 中添加过滤器，您必须像底部示例一样使用dateFilter输入：

<mat-form-field class="custom-filter-field" appearance="outline">
    <mat-label>Date</mat-label>
    <mat-date-range-input [formGroup]="range" [rangePicker]="picker"  [dateFilter]="myFilter">
      <input matStartDate placeholder="Start date" formControlName="start">
      <input matEndDate placeholder="End date" formControlName="end" >
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
  </mat-form-field>

在您的 ts 文件中，您必须实现过滤器功能：

myFilter = (d: Date | null): boolean => {
    const day = (d || new Date()).getTime();
    return day <= this.todayDate.getTime();
  };

此方法过滤未来日期并且不显示它们

推荐阅读