Angular Material日期范围选择器dateFilter类型不匹配错误怎么解决

报错原因 #

Angular Material 12.x 版本中，mat-date-range-input 的 dateFilter 输入属性要求的类型为 DateFilterFn<D>，泛型 D 对应项目使用的日期类型，默认是原生 Date 类型。该函数签名要求入参允许为 null（用来处理空值、无效日期等边界场景），你定义的 rangeFilter 仅接收非空的 Date 类型参数，因此出现类型不匹配报错。

可行解决方案 #

方案一：显式声明类型（推荐） #

直接引入 DateFilterFn 类型定义函数，同时处理入参为空的情况：

// 组件头部先引入类型
import { DateFilterFn } from '@angular/material/datepicker';

// 改写rangeFilter定义
rangeFilter: DateFilterFn<Date> = (date: Date | null): boolean => {
  // 空日期默认不允许选中，可根据业务需求调整返回值
  if (!date) return false;
  return date.getDate() > 20;
}

方案二：直接兼容空参数 #

如果不想引入额外类型，直接修改入参类型即可：

rangeFilter(date: Date | null): boolean {
  return date ? date.getDate() > 20 : false;
}

验证 #

修改完成后重启开发服务，类型报错会消失，原有的日期过滤逻辑（仅允许选中每月20号之后的日期）保持正常生效。

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