如何基于日期数组在Angular Material日期选择器高亮自定义年月？

我明白你的痛点——Angular Material的日期选择器默认只给日期视图提供了dateClass来定制样式，但年月视图确实没有直接的官方API支持高亮。不过我们可以通过操作DOM结合日期选择器的事件来实现需求，下面是具体的解决方案：

第一步：整理数据，构建年份-月份映射 #

首先把你的日期数组转换成便于查询的结构，这样后续可以快速知道哪些年份、哪些月份需要高亮：

import { Component, ViewChild, inject, OnInit } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';
import { Renderer2 } from '@angular/core';

@Component({
  selector: 'app-date-picker-custom',
  templateUrl: './date-picker-custom.component.html',
  styleUrls: ['./date-picker-custom.component.css']
})
export class DatePickerCustomComponent implements OnInit {
  arrayOfDays = [new Date('2019-01-01'), new Date('2020-08-10'), new Date('2020-09-20')];
  // 存储年份对应的需要高亮的月份集合（月份是0-based，1月=0）
  private yearMonthMap = new Map<number, Set<number>>();

  @ViewChild('picker') picker!: MatDatepicker<Date>;
  private renderer = inject(Renderer2);

  ngOnInit() {
    // 遍历日期数组，构建年份-月份映射
    this.arrayOfDays.forEach(date => {
      const year = date.getFullYear();
      const month = date.getMonth();
      if (!this.yearMonthMap.has(year)) {
        this.yearMonthMap.set(year, new Set());
      }
      this.yearMonthMap.get(year)!.add(month);
    });
  }
}

第二步：监听日期选择器的事件，动态高亮年月视图 #

我们需要监听日期选择器的opened（面板打开）和viewChanged（视图切换，比如从年份切到月份）事件，每次视图变化时，找到对应的年月按钮并添加高亮样式：

模板部分（.html）：

<input [matDatepicker]="picker" /> 
<i class="fas fa-chevron-down"></i> 
<mat-datepicker #picker (opened)="onPickerOpened()" (viewChanged)="onViewChanged()"></mat-datepicker>

组件逻辑部分（.ts）：

onPickerOpened() {
  this.highlightRelevantDates();
}

onViewChanged() {
  this.highlightRelevantDates();
}

private highlightRelevantDates() {
  // 获取日期选择器面板的DOM元素
  const panelElement = this.picker._datepickerPanel?._elementRef.nativeElement;
  if (!panelElement) return;

  // 先移除之前添加的高亮类，避免重复样式
  panelElement.querySelectorAll('.highlight-year, .highlight-month').forEach((el: HTMLElement) => {
    this.renderer.removeClass(el, 'highlight-year');
    this.renderer.removeClass(el, 'highlight-month');
  });

  // 判断当前是年份视图还是月份视图
  const isYearView = !!panelElement.querySelector('.mat-calendar-years');
  const isMonthView = !!panelElement.querySelector('.mat-calendar-months');

  if (isYearView) {
    // 高亮需要的年份：通过[data-year]属性定位年份按钮
    this.yearMonthMap.forEach((_, year) => {
      const yearButton = panelElement.querySelector(`[data-year="${year}"]`);
      if (yearButton) {
        this.renderer.addClass(yearButton, 'highlight-year');
      }
    });
  } else if (isMonthView) {
    // 获取当前视图对应的年份，然后高亮该年份下的目标月份
    const currentYear = this.picker._datepickerPanel?._calendar.activeDate.getFullYear();
    const targetMonths = this.yearMonthMap.get(currentYear);
    if (!targetMonths) return;

    // 通过[data-month]属性定位月份按钮（注意是0-based）
    targetMonths.forEach(month => {
      const monthButton = panelElement.querySelector(`[data-month="${month}"]`);
      if (monthButton) {
        this.renderer.addClass(monthButton, 'highlight-month');
      }
    });
  }
}

第三步：添加自定义高亮样式 #

在组件的CSS文件里定义高亮的样式，比如红色边框：

/* 年份视图高亮样式 */
.highlight-year {
  border: 2px solid red;
  border-radius: 50%;
}

/* 月份视图高亮样式 */
.highlight-month {
  border: 2px solid red;
  border-radius: 4px;
}

/* 避免和默认选中样式冲突 */
.highlight-year.mat-calendar-body-selected,
.highlight-month.mat-calendar-body-selected {
  border-color: red;
  background-color: rgba(255, 0, 0, 0.1);
}

关键说明 #

• 为什么dateClass没用？因为dateClass是专门针对**日期视图（天的单元格）**设计的，不会作用于年份和月份视图的按钮元素。
• 我们用了Renderer2来操作DOM，这是Angular推荐的方式，避免直接操作DOM带来的兼容性和变更检测问题。
• 依赖的data-year和data-month属性是Angular Material内部用于标识年月按钮的属性，比直接依赖类名更稳定（类名可能随版本变更）。

这样就能实现你要的效果：年份视图高亮2019和2020，选中2019时高亮1月，选中2020时高亮8月和9月（你需求里写的5月应该是笔误，对应数组里的日期是8月和9月）。

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