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

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

1 голос
/ 03 февраля 2020

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

    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 * Проверка даты документацию, мы можем использовать [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>

TypeScript: 

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 Пример материала в Stackblitz

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

1 Ответ

2 голосов
/ 03 февраля 2020

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

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

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

    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
   }
}
...