Angular中如何基于指定日期列表在Angular Material datepicker添加状态图标

1. 预处理日期状态数据 #

首先把你现有的日期状态数组转换为便于快速查找的Map结构，避免每次渲染日期都遍历数组降低性能：

// 组件类中定义状态Map
dateStatusMap = new Map<string, boolean>();

// 初始化时预处理数据
initDateStatus(statusArr: {date: string, isAvailable: boolean}[]) {
  statusArr.forEach(item => {
    // 统一日期格式为YYYY-MM-DD作为key
    const dateKey = new Date(item.date).toISOString().split('T')[0];
    this.dateStatusMap.set(dateKey, item.isAvailable);
  })
}

2. 定义工具方法 #

在组件类中新增两个方法，分别用于给日期单元格添加自定义类，以及获取日期对应状态：

// 用于dateClass输入的类判断方法（仅标记颜色场景可直接用）
dateClass = (date: Date): string => {
  const dateKey = date.toISOString().split('T')[0];
  const isAvailable = this.dateStatusMap.get(dateKey);
  if (isAvailable === true) return 'date-available';
  if (isAvailable === false) return 'date-unavailable';
  return '';
}

// 获取日期对应可用状态
getDateAvailability(date: Date): boolean | undefined {
  const dateKey = date.toISOString().split('T')[0];
  return this.dateStatusMap.get(dateKey);
}

3. 自定义日期选择器单元格模板 #

修改组件模板，为datepicker添加自定义单元格模板，插入状态图标：

<!-- 输入框与datepicker触发入口 -->
<input matInput [matDatepicker]="picker" [formControl]="dateControl">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>

<!-- 自定义单元格内容的datepicker -->
<mat-datepicker #picker>
  <ng-template matDatepickerCellTemplate let-date>
    <!-- 显示日期数字 -->
    <span>{{ date.getDate() }}</span>
    <!-- 状态图标，仅存在状态配置的日期显示 -->
    <mat-icon 
      *ngIf="getDateAvailability(date) !== undefined"
      class="status-icon"
      [ngClass]="{
        'icon-available': getDateAvailability(date),
        'icon-unavailable': !getDateAvailability(date)
      }"
    >
      circle
    </mat-icon>
  </ng-template>
</mat-datepicker>

4. 添加样式调整显示效果 #

在组件样式文件中添加对应样式，调整图标大小、颜色和布局：

/* 调整日期单元格布局，容纳日期+图标 */
::ng-deep .mat-calendar-body-cell-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto !important;
  padding: 4px 0;
}

/* 状态图标基础样式 */
.status-icon {
  font-size: 12px;
  width: 12px;
  height: 12px;
  margin-top: 2px;
}

.icon-available {
  color: #2ecc71;
}

.icon-unavailable {
  color: #e74c3c;
}

注意事项 #

• 提前在对应模块导入依赖：MatDatepickerModule、MatIconModule、日期适配器相关模块
• 若存在时区差异问题，需要调整日期转字符串key的逻辑，避免日期匹配错误
• 如果仅需要给日期加背景/文字颜色标记不需要显示图标，直接给mat-datepicker绑定[dateClass]="dateClass"即可，无需自定义单元格模板

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