Angular mat-calendar使用dateFilter/dateClass与selectedChange的类型错误解决

• 修正selectedChange事件处理函数的参数类型
  这个错误的核心是selectedChange触发时传递的参数是MatCalendarSelectedChange<Date>（包含value: Date | null和source: MatCalendar<Date>），而非你预期的Event_2类型。在组件代码里正确定义函数参数类型即可：

  // 组件.ts文件
  onDateSelected(event: MatCalendarSelectedChange<Date>): void {
    const selectedDate = event.value;
    if (selectedDate) {
      // 在这里处理选中的日期逻辑，比如匹配预订记录等
    }
  }
  

• 保证dateFilter函数的类型与逻辑正确
  dateFilter要求的是(date: Date) => boolean类型的函数，直接保留date参数实现过滤逻辑就行，比如对比已预订日期数组：

  // 组件.ts文件
  // 假设这是你的已预订日期列表
  bookedDates: Date[] = [new Date('2024-05-10'), new Date('2024-05-15')];
  
  myFilter(date: Date): boolean {
    // 返回true表示日期可用，false表示不可用
    return !this.bookedDates.some(bookedDate => 
      bookedDate.getDate() === date.getDate() &&
      bookedDate.getMonth() === date.getMonth() &&
      bookedDate.getFullYear() === date.getFullYear()
    );
  }
  

• 模板中正确绑定函数
  在模板里确保dateFilter和selectedChange的绑定名称正确，和组件里的函数对应：

  <mat-calendar
    [dateFilter]="myFilter"
    (selectedChange)="onDateSelected($event)"
  ></mat-calendar>
  

• 额外说明
  如果你是误把selectedChange的参数当成了原生DOM事件（Event），要注意mat-calendar的selectedChange是自定义事件，传递的是封装后的日期选中对象，不是原生Event。如果确实需要处理原生点击事件，可以额外绑定(click)，但一般用selectedChange就足够处理日期选中逻辑。

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