Отключить определенные даты в Angular Material Date

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

Так что вы можете использовать min а также max свойства или matDatepickerFilter для более определенных фильтров (вероятно, лучше для вашего случая). Вы можете проверить два примера по ссылке выше (первый min а также max2-й с matDatepickerFilter).

Answer 2

Вы можете использовать matDatepickerFilter, если необходимо отфильтровать определенные даты. Простой пример будет

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

и в шаблоне

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

Рабочая демонстрация в stackblitz: демонстрация

Answer 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>

Это позволит пользователю выбрать любую дату с 1 января 2019 года по 1 января 2020 года, включая обе даты. Надеюсь, это поможет.