Angular日期选择器自定义日期CSS样式不生效问题

你遇到的问题是dateClass函数能正确返回目标类名，但自定义样式无法作用到Mat-Datepicker的日期单元格上，核心原因是Angular的视图封装机制默认会隔离组件样式，而Mat-Datepicker的弹窗属于独立的组件DOM，当前组件的样式无法穿透到内部。下面是具体解决方法：

解决方法1：使用::ng-deep穿透样式 #

Angular提供::ng-deep伪类可以打破视图封装，让样式作用到子组件内部。修改你的CSS代码如下：

/* 限定当前组件内生效，避免全局污染 */
:host ::ng-deep .highlighted-date {
  background: rgb(224, 245, 255);
}

• :host确保样式只作用于当前组件的Datepicker；
• ::ng-deep让样式渗透到Mat-Datepicker内部的日期单元格元素。

解决方法2：将样式放到全局样式文件 #

如果不想使用::ng-deep，可以把.highlighted-date的样式直接添加到项目根目录的styles.css（或styles.scss）中，全局样式会作用到所有组件的DOM元素：

/* 全局样式文件中添加 */
.highlighted-date {
  background: rgb(224, 245, 255);
}

注意：这种方式可能会影响其他使用相同类名的元素，需保证样式命名的唯一性。

额外检查：日期匹配的准确性 #

虽然你提到dateClass能正确返回类名，但可以确认下日期匹配逻辑是否严谨——Date.getTime()会包含时分秒信息，如果你的highlightedDates中创建的日期带有非0的时分秒，而Mat-Datepicker传入的date是当天0点，会导致匹配失败。可以修改TS中的匹配逻辑，只比较年月日：

highlightedDates = [new Date('04/17/2023'), new Date('04/05/2023'), new Date('04/15/2023')];

dateClass = (date: Date): MatCalendarCellCssClasses => {
  // 仅提取年月日部分进行比较
  const normalizeDate = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
  
  const highlightDate = this.highlightedDates.find(d => normalizeDate(d) === normalizeDate(date));
  return highlightDate ? 'highlighted-date' : '';
}

你的原始代码参考 #

HTML代码

<mat-form-field appearance="fill">
     <mat-label>Date de retour</mat-label>
   <input matInput [matDatepicker]="picker2" [(ngModel)]="date_retour"  name="inputcalendar2">
   <mat-hint>MM/JJ/YYYY</mat-hint>
   <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
   <mat-datepicker [dateClass]="dateClass" #picker2></mat-datepicker>
</mat-form-field>

Component.ts代码

highlightedDates = [new Date('04/17/2023'), new Date('04/05/2023'), new Date('04/15/2023')];
dateClass = (date: Date): MatCalendarCellCssClasses => {
    var highlightDate = this.highlightedDates.find(d => d.getTime() === date.getTime());
    console.log(highlightDate);
    return highlightDate ? 'highlighted-date' : '';
}

CSS代码（原始未生效版本）

.highlighted-date 
{  
    background: rgb(224, 245, 255);
}

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