3

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

3 回答 3

5

您必须使用日期验证：

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

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

于 2019-07-30T06:44:15.270 回答
4

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

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

并在模板中

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

在 stackblitz 中工作演示：demo

于 2020-05-22T13:18:42.007 回答
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 日之间的任何日期，包括这两个日期。希望这会有所帮助。

于 2019-07-30T06:52:46.750 回答