Angular 16使用mat-datepicker过滤周末时出现错误

在Angular 16里使用mat-datepicker的matDatepickerFilter过滤周末时，会触发类型不匹配错误，错误提示为：

Type 'boolean' is not assignable to type 'boolean | null'. Type 'boolean' is not assignable to type 'null'.

原代码 #

HTML代码

<mat-form-field>
  <mat-label>01/01/2000</mat-label>
  <input matInput [matDatepickerFilter]="weekendsDatesFilter" formControlName="deliveryDate" [matDatepicker]="picker">

  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

TypeScript代码

weekendsDatesFilter = (d: Date): boolean => {
  const day = d.getDay();

  /* Prevent Saturday and Sunday for select. */
  return day !== 0 && day !== 6 ;
}

解决方法 #

Angular 16中matDatepickerFilter对应的回调函数类型DatepickerFilterFn要求返回值为boolean | null，而原代码中函数仅返回boolean，导致类型校验失败。只需修改函数的返回类型声明即可：

weekendsDatesFilter = (d: Date): boolean | null => {
  const day = d.getDay();

  /* Prevent Saturday and Sunday for select. */
  return day !== 0 && day !== 6 ;
}

该修改适配了Angular Material 16对日期过滤函数的类型更新，确保返回值符合框架要求，同时不影响原本的周末过滤逻辑。

内容的提问来源于stack exchange，提问作者Mathias Van Langendonck