Angular Material Date Picker - 根据外部 API 调用禁用日期

Question

我正在使用外部 API 来返回所有银行假日。我需要使用此响应来禁用 Angular Material 日期选择器中的所有这些日期（以及周末）。

因为我正在进行 HTTP 调用，所以它似乎不起作用。

这是我最新的代码，但目前这只是禁用所有日期：

onDisableDates = (date: any) => {
    const day = date.day();

    this.validationService.getBankHolidayDates().subscribe(response => {
      const bankHolidays = response['england-and-wales'].events.map(i => new Date(i.date));
      bankHolidays.forEach(bankHoliday => {
        let isBankHoliday = false;
        const holiday = bankHoliday.toLocaleDateString();
        const input = moment(new Date(date)).format('DD/MM/YYYY');

        if (holiday === input) {
          isBankHoliday = true;
        }

        return day !== 0 && day !== 6 && !isBankHoliday;
     });
   });
}

HTML

<mat-form-field>
  <mat-label>DD/MM/YYYY</mat-label>
  <input id="startDate" matInput [matDatepickerFilter]="onDisableDates" [matDatepicker]="picker" [min]="minDate" formControlName="startDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>

另外，请注意我使用的是 MAT_DATE_LOCALE 和 MomentDateAdapter。

任何指导都会很棒，因为我花了几天的时间试图让它发挥作用！

Stackblitz 在这里：https://stackblitz.com/edit/angular-wvqzpb-u9d52c

Answer 1

我在您的 stackblitz 演示中进行了一些编辑。你可以去看看

组件代码::

import {Component} from '@angular/core';
import { ValidationService } from './validation.service';
import moment, * as moments from 'moment';  
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

/** @title Datepicker with filter validation */
@Component({
  selector: 'datepicker-filter-example',
  templateUrl: 'datepicker-filter-example.html',
  styleUrls: ['datepicker-filter-example.css'],
})
export class DatepickerFilterExample {
startDate = new Date();
guestForm:any;
  constructor(private validationService: ValidationService,private fb:FormBuilder) {

  // this.myGroup = this.fb.group({
  //   startDate: ['',],
  //   // enter the other form controls in the group

  // });
  this.guestForm = new FormGroup({
startDate: new FormControl()
});
  }

  onDisableDates = (date: any) => {
    const day = date.getDay ();
    this.validationService.getBankHolidayDates().subscribe(response => {

      const bankHolidays = response['england-and-wales'].events.map(i => new Date(i.date));
      bankHolidays.forEach(bankHoliday => {
        let isBankHoliday = false;
        const holiday = bankHoliday.toLocaleDateString();
        const input = moment(new Date(bankHoliday)).format('DD/MM/YYYY');

        if (holiday === input) {
          isBankHoliday = true;
        }
      });
    });

    return day !== 0 && day !== 6;
  }
}

HTML 代码::

<form [formGroup]="guestForm" novalidate>
<mat-form-field>
  <mat-label>DD/MM/YYYY</mat-label>
  <input id="startDate" matInput [matDatepickerFilter]="onDisableDates" [matDatepicker]="picker" [min]="minDate" formControlName="startDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>
</form>

得到这样的输出 ::

Answer 2

对于任何为此苦苦挣扎的人（比如我）...关键是首先使用这个在 HTML 中启用绑定 -

[matDatepickerFilter]="onDisableDates.bind(this)"

这意味着我可以在页面加载时“预加载”数据，然后使用该数据禁用使用日期选择器时所需的日期，如下所示：

bankHolidays: any;

constructor(private validationService: ValidationService) { }

ngOnInit() {
  this.validationService.getBankHolidayDates().subscribe(response => {
    this.bankHolidays = response['england-and-wales'].events.map(i =>
      moment(new Date(i.date)).format('DD/MM/YYYY'));
  });
}

onDisableDates(date: any): boolean {
  const day = date.day();
  const input = moment(new Date(date)).format('DD/MM/YYYY');
  return !this.bankHolidays.includes(input) && day !== 0 && day !== 6;
}

希望这可以帮助某人节省时间:)