在 Angular 材质日期选择器中禁用特定日期答案

【问题标题】：Disable particular dates in Angular Material Date picker在 Angular 材质日期选择器中禁用特定日期
【发布时间】：2019-07-30 06:36:32
【问题描述】：

我正在为我的一个项目尝试使用 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>
``

【问题讨论】：

标签： angular angular-material angular6 angular-material-datetimepicker

【解决方案1】：

您必须使用日期验证：

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

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

【讨论】：

使用 matDatepickerFilter 添加一个工作演示。谢谢你，我没有在材料文档中注意到它

【解决方案2】：

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

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

在模板中

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

stackblitz 中的工作演示：demo

【讨论】：

【解决方案3】：

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

 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 日之间的任何日期，包括这两个日期。希望这会有所帮助。

【讨论】：

嘿，在上面的答案中，如何将当前日期设置为 maxDate。请帮帮我