如何解决Angular Material日期选择器异步加载禁用日期失效问题

方案1：初始禁用日期选择器，数据加载完成后启用 #

通过初始禁用输入框，确保用户只能在假日数据加载完成后选择日期，从根源避免过滤逻辑失效。

修改HTML，添加禁用状态绑定：

<mat-form-field class="w-100">
  <input matInput 
         [matDatepicker]="picker" 
         formControlName="startDate" 
         [matDatepickerFilter]="myHolidayFilter" 
         placeholder="Choose a date"
         [disabled]="!myHolidayDates.length">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

组件TS代码初始化空数组，并在数据加载完成后更新：

myHolidayDates: Date[] = [];

ngOnInit() {
  this.scheduleService.getLeaveDate().subscribe(result => {
    this.myHolidayDates = result;
    // 可选：手动启用表单控件（若表单初始设置了禁用）
    // this.yourFormGroup.get('startDate')?.enable();
  });
}

myHolidayFilter = (d: Date) => {
  const time = d.getTime();
  return !this.myHolidayDates.find(x => x.getTime() === time);
};

方案2：将过滤器改为Getter函数，触发自动变更检测 #

把过滤器改成Getter函数，每次myHolidayDates更新时，Getter会返回新的函数引用，触发Angular重新应用过滤逻辑。

组件TS代码修改：

myHolidayDates: Date[] = [];

// 改为Getter函数
get myHolidayFilter() {
  return (d: Date) => {
    const time = d.getTime();
    return !this.myHolidayDates.find(x => x.getTime() === time);
  };
}

ngOnInit() {
  this.scheduleService.getLeaveDate().subscribe(result => {
    this.myHolidayDates = result;
  });
}

HTML无需修改，保持原有的[matDatepickerFilter]="myHolidayFilter"绑定即可。

方案3：手动触发日期选择器刷新（依赖内部API，谨慎使用） #

数据加载完成后，手动调用日期选择器的内部刷新方法，强制重新渲染日历。

组件TS代码：

import { ViewChild } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';

// 获取日期选择器引用
@ViewChild('picker') picker!: MatDatepicker<Date>;

myHolidayDates: Date[] = [];
myHolidayFilter = (d: Date) => {
  const time = d.getTime();
  return !this.myHolidayDates.find(x => x.getTime() === time);
};

ngOnInit() {
  this.scheduleService.getLeaveDate().subscribe(result => {
    this.myHolidayDates = result;
    // 异步刷新日历，确保DOM已更新
    setTimeout(() => {
      if (this.picker) {
        this.picker._refreshHeader();
        this.picker._updateCalendar();
      }
    });
  });
}

内容的提问来源于stack exchange，提问作者Aniket kute