matDatepickerFilter 打破 mat-datepicker答案

【问题标题】：matDatepickerFilter breaks mat-datepickermatDatepickerFilter 打破 mat-datepicker
【发布时间】：2020-09-30 09:39:32
【问题描述】：

我需要在mat-datepicker 中禁用一些月份和几天，但是当我尝试设置[matDatepickerFilter] 时，它会完全破坏我的mat-datepicker（见下文）。

HTML：

<mat-form-field>
  <mat-label>Reporting period</mat-label>
  <input matInput [matDatepicker]="periodDp" [matDatepickerFilter]="dateFilter" [(ngModel)]="filter.period">
  <mat-datepicker-toggle matSuffix [for]="periodDp"></mat-datepicker-toggle>
  <mat-datepicker #periodDp></mat-datepicker>
</mat-form-field>

TypeScript：

dateFilter = (date: Date) => date.getMonth() % 2 === 1 && date.getDate() % 2 === 0;

怎么了？我对[dateClass] 属性也有同样的情况，没有过滤器一切正常。

【问题讨论】：

您在浏览器控制台中看到的错误是什么？

标签： angular typescript datepicker angular-material

【解决方案1】：

您应该返回带有布尔值的过滤器，例如

     myFilter = (date: Date): boolean => {
  return date.getMonth() % 2 === 1 && date.getDate() % 2 === 0;
  }

这是一个工作演示

https://stackblitz.com/edit/angular-kvtat7?file=app/datepicker-filter-example.ts

【讨论】：