Angular Material matDatepicker禁用指定日期报错求助

报错根源分析 #

你遇到的两个错误原因明确：

1. 日期模块冲突：同时导入MomentDateModule和MatNativeDateModule，二者均为日期适配器，共存会引发类型不匹配问题。
2. 过滤器属性位置错误：新版本Angular Material已废弃matDatepickerFilter属性，日期过滤器需绑定到<mat-datepicker>组件的dateFilter输入属性，而非<input>标签。

分步解决方案 #

1. 修复模块导入冲突 #

在你的模块文件中，移除MomentDateModule和MatNativeDateModule中的一个（二选一，以下示例保留原生日期模块）：

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AppRoutingModule,
  MatDatepickerModule,
  MatFormFieldModule,
  MatInputModule,
  FormsModule,
  // 移除MomentDateModule，仅保留MatNativeDateModule
  MatNativeDateModule
],

2. 调整过滤器绑定位置 #

修改HTML代码，将过滤器从<input>转移到<mat-datepicker>上，使用[dateFilter]属性：

<div class="paneContainer">
  <div class="matdatepicker">
    <mat-form-field appearance="fill">
      <mat-label>Choose Date!</mat-label>
      <input matInput [matDatepicker]="picker" min="{{currentDate | date:'yyyy-MM-dd'}}" [(ngModel)]="selectedMatDate" >
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <!-- 将过滤器绑定到mat-datepicker的dateFilter属性 -->
      <mat-datepicker #picker [dateFilter]="myHolidayFilter"></mat-datepicker>
    </mat-form-field>
  </div>
</div>

3. 修正日期解析问题 #

TS中new Date("25/3/2023")这类字符串格式可能因浏览器locale导致解析错误，建议使用new Date(年, 月-1, 日)的构造方式（月份从0开始计数）：

myHolidayDates = [
  new Date(2023, 2, 25), // 2023年3月25日
  new Date(2020, 11, 20), // 2020年12月20日
  new Date(2020, 11, 17),
  new Date(2020, 11, 25),
  new Date(2020, 11, 4),
  new Date(2020, 11, 7),
  new Date(2020, 11, 12),
  new Date(2020, 11, 11),
  new Date(2020, 11, 26),
  new Date(2020, 11, 25)
];

4. 优化过滤器函数（可选） #

为避免日期时间戳匹配的精度问题（如时间部分差异），可仅比较年月日：

myHolidayFilter = (d: Date): boolean => {
  const targetDate = new Date(d.getFullYear(), d.getMonth(), d.getDate());
  return !this.myHolidayDates.some(holiday => {
    const holidayDate = new Date(holiday.getFullYear(), holiday.getMonth(), holiday.getDate());
    return targetDate.getTime() === holidayDate.getTime();
  });
}

验证效果 #

完成上述修改后重新运行项目，日期选择器将正确过滤指定假期日期，同时类型错误会彻底消失。

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