Angular 10中如何为MatDateRangeInput指定日期添加颜色样式

步骤1：定义日期类判断函数 #

在组件的TypeScript文件中，创建函数根据日期条件返回对应CSS类名：

import { MatCalendarCellCssClasses } from '@angular/material/datepicker';

// 组件其他代码...

getDateClass(date: Date): MatCalendarCellCssClasses {
  // 替换为你的实际判断逻辑，比如匹配特定日期、周末或业务规则日期
  const isSpecialDate = date.getDay() === 0 || date.getDay() === 6; // 示例：标记周末
  // 可返回多个类名，用空格分隔
  return isSpecialDate ? 'weekend-date highlighted' : '';
}

步骤2：绑定日期类到日期选择器 #

修改模板中的<mat-date-range-picker>标签，添加[dateClass]绑定：

<mat-form-field appearance="outline" class="col-3 date-picker" (click)="picker2.open()">
  <mat-label>start date</mat-label>
  <mat-date-range-input class="special-element" [rangePicker]="picker2" [dateFilter]="dateFilter">
    <input matEndDate [readonly]="true" (dateChange)="changeDate('endDate')">
    <!-- 修正原代码空格问题：[readonly]前添加空格 -->
    <input matStartDate (dateChange)="changeDate('startDate')" [readonly]="true">
  </mat-date-range-input>

  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <!-- 绑定自定义日期类函数 -->
  <mat-date-range-picker #picker2 [dateClass]="getDateClass"></mat-date-range-picker>
</mat-form-field>

步骤3：编写自定义样式 #

在组件的CSS/SCSS文件中添加样式，利用::ng-deep穿透Angular样式隔离（全局样式文件无需::ng-deep）：

::ng-deep .weekend-date .mat-calendar-body-cell-content {
  background-color: #f5f5f5;
  color: #999;
}

::ng-deep .highlighted .mat-calendar-body-cell-content {
  border-radius: 50%;
  font-weight: bold;
}

/* 可选：添加选中状态的叠加样式 */
::ng-deep .weekend-date.mat-calendar-body-selected .mat-calendar-body-cell-content {
  background-color: #ff9800;
  color: #fff;
}

注意事项 #

• 若样式未生效，检查是否开启Angular视图封装（默认开启），此时必须用::ng-deep或把样式放到全局样式文件。
• dateClass函数会遍历日历所有日期，可根据业务需求灵活调整判断逻辑，比如判断日期是否在指定范围内、是否为节假日等。
• 原代码中<input matStartDate>的[readonly]属性前缺少空格，已在示例中修正，避免语法错误。

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