Как отключить даты Angular Material Datepicker из массива дат?

У меня есть массив дат, который я называю holidayList, который я бы хотел отключить с помощью Datepicker Angular Material.

    holidayList: Date[] = [];
        this.holidayList: [
                    new Date("1/1/2020"),
                    new Date("1/20/2020"),
                    new Date("2/17/2020"),
                    new Date("5/25/2020"),
                    new Date("7/4/2020"),
                    new Date("9/7/2020"),
                    new Date("10/12/2020"),
                    new Date("11/11/2020"),
                    new Date("11/26/2020"),
                    new Date("12/25/2020")
                ]

Читая документацию по Angular Date validation, мы можем использовать [matDatepickerFilter]="myFilter" вот так:

HTML:

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

Машинопись:

import {Component} from '@angular/core';

/** @title Datepicker with filter validation */
@Component({
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
})

export class DatepickerFilterExample {
  myFilter = (d: Date): boolean => {
    const day = d.getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }
}

Тем не менее, этот пример по сути говорит: «Предоставьте все дни, в которых день недели не равен 0 или 6». Я немного запутался в том, как реализовать список дат и сказать: «вот список дат, которые мы должны отключить».

Ссылка на пример Angular Material на Stackblitz

Я знаю, что по этой теме есть несколько вопросов, но все ответы, с которыми я столкнулся, касаются только отключения определенных дней недели, месяцев (например, отключение нечетных месяцев) - по сути, отключение типа дня; в этом случае я бы хотел отключить жестко запрограммированные даты и ничего более.


angular datepicker angular-material disabled-input
person Jett    schedule 03.02.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Jedo, вам нужно изменить функцию myFilter, которая возвращает true, если она действительна (в вашем случае, если ее нет в массиве Holiday), и false, если она недопустима (когда дата находится в вашем массиве Holiday). Итак, вы просто замените функцию на

  myFilter = (d: Date): boolean => {
    const time=d.getTime()
    return !this.holidayList.find(x=>x.getTime()==time)
  }

ПРИМЕЧАНИЕ: чтобы найти в массиве, я преобразовываю ваш массив дат с помощью getTime, это более эффективно, если вы храните свой arry непосредственно как время

    this.holidayList=[new Date("1/1/2020").getTime(),
                      new Date("1/20/2020").getTime(),
                      ...  
                     ]

И ваша функция

 myFilter = (d: Date): boolean => {
    const time=d.getTime()
    return !this.holidayList.find(x=>x==time)
  }

ПРИМЕЧАНИЕ 2: (это не означает, что пользователь может ввести недопустимую дату вручную, поэтому вам нужно создать настраиваемый валидатор, чтобы проверить, действительна ли дата.

validateDate()
{
   return (control:FormControl)=>{
       const time=control.value.getTime();
       return this.holidayList.find(x=>x==time)?{error:'we are on holidays'}:null
   }
}
person Eliseo    schedule 03.02.2020