如何使用 Angular Material Datepicker 禁用特定日期？答案

【问题标题】：How to disable specific dates using Angular Material Datepicker?如何使用 Angular Material Datepicker 禁用特定日期？
【发布时间】：2018-01-09 13:57:33
【问题描述】：

我想在 Angular Material Datepicker 组件中禁用周末和特定日期。

我该怎么做？

app.component.html：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

package.json：

"dependencies": {
    "@angular/animations": "^5.1.3",
    "@angular/cdk": "^5.0.3",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.3",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },

【问题讨论】：

看这里：docs，你需要 matDatepickerFilter

标签： angular angular-material

【解决方案1】：

你需要matDatepickerFilter，像这样使用它：

 <mat-form-field>
     <input matInput
        [matDatepicker]="picker"
        [matDatepickerFilter]="dateFilter"
        placeholder="Choose a date">
     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

在您的组件中，例如someComponent.ts:

@Component({...})
export class SomeComponent.ts {
...
    dateFilter = (date: Date) => date.getMonth() % 2 == 1 && date.getDate() % 2 == 0;
...
}

...代表一些其他的东西，过滤只是过滤奇数月份的一个例子，你可以使用任何，一般它必须是返回布尔并接受的函数日期

reference example project

reference docs

【讨论】：