Question

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

<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用于更多指定的过滤器（可能对您的情况更好）。您可以在上面的链接中查看两个示例（第一个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>

这将允许用户选择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 Date选择器中禁用特定日期

3 个答案: