如何根据后端动态数据激活Angular Material日期选择器中有数据的对应日期

步骤1：组件内定义存储变量并请求后端数据 #

在组件类中声明数组存储后端返回的有数据日期，为了避免日期时分秒、时区差异导致匹配失败，统一转换为当日0点的时间戳存储：

import { Component, OnInit } from '@angular/core';
import { MatCalendarCellCssClasses } from '@angular/material/datepicker';
// 引入你自己的后端请求服务
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-date-picker-demo',
  templateUrl: './date-picker-demo.component.html',
  styleUrls: ['./date-picker-demo.component.scss']
})
export class DatePickerDemoComponent implements OnInit {
  // 存储后端返回的有效日期时间戳列表
  validDateTimestamps: number[] = [];

  constructor(private dataService: YourDataService) {}

  ngOnInit(): void {
    // 请求后端获取有数据的日期列表
    this.dataService.getAvailableDates().subscribe((dateList: string[]) => {
      // 批量转换为当日0点的时间戳，消除时分秒、时区的影响
      this.validDateTimestamps = dateList.map(dateStr => {
        const date = new Date(dateStr);
        return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
      });
    });
  }

步骤2：定义日期匹配的CSS类返回函数 #

利用Material Datepicker提供的dateClass输入属性，为匹配到的有效日期返回自定义高亮类名：

// 接上面的组件类代码
  dateClass = (date: Date): MatCalendarCellCssClasses => {
    const compareTimestamp = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
    // 匹配到有效日期返回自定义高亮类，否则返回空
    return this.validDateTimestamps.includes(compareTimestamp) ? 'highlight-valid-date' : '';
  };
}

步骤3：模板中绑定dateClass属性 #

在日期选择器的组件标签上绑定刚才定义的dateClass函数：

<input matInput [matDatepicker]="picker" placeholder="选择日期">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<!-- 核心绑定dateClass属性 -->
<mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>

步骤4：添加高亮样式 #

在全局样式文件（通常是styles.scss）中添加自定义高亮样式，确保样式优先级足够：

.highlight-valid-date {
  background-color: #2196F3 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
}

// 可选：添加hover状态样式
.highlight-valid-date:hover {
  background-color: #1976D2 !important;
}

可选扩展：限制仅可选择有效日期 #

如果需要同时禁止用户选择无数据的日期，可额外绑定matDatepickerFilter属性，复用日期匹配逻辑即可：

// 组件类中新增过滤函数
dateFilter = (date: Date | null): boolean => {
  if (!date) return false;
  const compareTimestamp = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
  return this.validDateTimestamps.includes(compareTimestamp);
};

<!-- input标签上绑定filter属性 -->
<input matInput [matDatepicker]="picker" [matDatepickerFilter]="dateFilter" placeholder="选择日期">

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