Angular Material Date Picker - отключить даты на основе внешнего вызова API

Question

Я использую внешний API для возврата всех банковских выходных. Мне нужно использовать этот ответ, чтобы отключить все эти даты в Angular Выбор даты материала (а также в выходные дни).

Поскольку я выполняю 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

Для любого, кто боролся с этим (как я) ... ключ был первым, чтобы включить привязку в 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;
}

Надеюсь, это поможет кому-то сэкономить время:)

Answer 2

Я сделал некоторые изменения в вашей демонстрации стекаблиц. Вы можете взглянуть на него

код компонента ::

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>

и получил такой вывод ::