在 Angular Material 日期选择器中禁用特定日期

Question

我正在为我的一个项目尝试 Angular 6 Material 个日期选择器。我需要禁用特定日期或让用户选择特定日期（可以是一些随机日期）。

<mat-card>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #pickers></mat-datepicker>
    <app-date-picker></app-date-picker>
  </mat-card>
``

Answer 1

您必须使用日期验证：

https://material.angular.io/components/datepicker/overview#date-validation

因此您可以使用 min 和 max 属性或 matDatepickerFilter 来指定更多过滤器（可能更适合您的情况）。您可以查看上面 link 中的两个示例（第一个 min 和 max，第二个 matDatepickerFilter）。

Answer 2

可能其中一种方法是确定您的最短和最长日期。因此，在您的组件中，您可以将最小和最大日期设置为：

 minDate = new Date(2019, 0, 1); //minDate is 1st Jan 2019
 maxDate = new Date(2020, 0, 1); //maxDate is 1st Jan 2020

现在在您的模板中：

 <mat-form-field class="example-full-width">
   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" 
     placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

这将允许用户 select 2019 年 1 月 1 日至 2020 年 1 月 1 日之间的任何日期，包括这两个日期。希望对您有所帮助。

Answer 3

如果需要过滤特定日期，您可以使用 matDatepickerFilter。一个简单的例子是

dateFilter = (d: Date) => { return [1, 5, 10, 21].indexOf(+d.getDate()) == -1; };

并在模板中

<input matInput [matDatepicker]="picker" [matDatepickerFilter]=dateFilter>

stackblitz 中的工作演示：demo

在 Angular Material 日期选择器中禁用特定日期

Disable particular dates in Angular Material Date picker

angular-material

angular

angular6

angular-material-datetimepicker