Как исключить даты из углового выбора даты? - PullRequest
Новая
       28

Как исключить даты из углового выбора даты?

1 голос
/ 26 апреля 2019

Я использую Angular Material, и у меня есть динамический массив дат, который я хочу исключить из моего средства выбора даты.Кроме того, я также пытаюсь исключить субботы.Как я могу вернуть несколько дат с помощью моего matDatepickerFilter?Имейте в виду, что я не могу жестко закодировать каждый элемент массива по отдельности, потому что массив изменчив и по прошествии некоторого времени изменится как по своим значениям, так и по длине.

Это мой HTML: 

<mat-form-field style="text-align: center;"
[ngClass]="{'hideTitle': submitted && f4.houseNumber.errors?.required && f4.aptNumber.errors?.required}">
    <input matInput 
      [matDatepicker]="picker" 
      placeholder="Desired Delivery Date" 
      [matDatepickerFilter]="myFilter"
      formControlName="deliveryDate" 
      style="font-family: 'Open Sans Condensed', sans-serif; color:white;">
    <mat-datepicker-toggle matSuffix [for]="picker" 
    style="color:gold;outline:none;"></mat-datepicker-toggle>
    <mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
</mat-form-field>

Это мой массив: 

this.allDupedDates = [
  new Date('2019-04-30T00:00:00+02:00'),
  new Date('2019-04-28T00:00:00+02:00'),
  new Date('2019-05-21T00:00:00+02:00'),
  new Date('2019-05-23T00:00:00+02:00')
]

А это код: 

myFilter = (d: Date): boolean => {
 const time = d.getTime();
 const day = d.getDay();
for (let i = 0; i < this.allDupedDates.length; i++) {
  var date = this.allDupedDates[i].getTime();
  return time !== date
}
return day !== 6;
}

1 Ответ

1 голос
/ 26 апреля 2019

Код фильтра, который вам нужен: 

myFilter = (d: Date): boolean => {
  const day = d.getDay();
  const blockedDates = this.allDupedDates.map(d => d.valueOf());
  return (!blockedDates.includes(d.valueOf())) && day !== 6;
}

- Объекты Date можно легко сравнивать друг с другом с помощью метода valueOf (), который возвращает свои миллисекунды с начала эпохи.

Важные советы для заметки:

  • Убедитесь, что объекты даты, которые вы создаете в dupedDates, создаются в том же часовом поясе, где выполняется фильтр. Это гарантирует, что часовые пояса одинаковы и не будет проблем смещения часового пояса. Например: 30 апреля 2019 года, 00:00:00, изменение на 29 апреля 2019 года 23: 30: 00.
  • Аргумент d: Date в функции фильтра всегда будет содержать дату, представляющую полночь в часовом поясе клиента. Например: если к приложению обращаются из Индии: d будет содержать 29 апреля 2019 г. 00:00:00 +05: 30, 30 апреля 2019 г. 00:00:00 +05: 30 и т. Д. ...

StackBlitz Пример: https://stackblitz.com/edit/angular-datepicker-filter-so?file=app%2Fdatepicker-filter-example.ts

...