Angular Material Datepicker区间选择时高亮整周范围的实现问题

问题根因 #

Angular Material 日期范围选择器的默认高亮逻辑基于绑定的原始选中日期范围，你仅修改了输入框的显示值，没有同步更新picker内部识别的有效日期范围，所以重新打开选择器时高亮还是基于用户最初点击的日期。

可选解决方案 #

方案1：同步更新绑定的日期范围值（最优） #

直接修改双向绑定的FormControl/ngModel值为调整后的周起止日期，picker会自动基于更新后的真实值渲染高亮，不需要额外自定义样式。
代码示例：

// 假设你用FormGroup存储日期范围
range = new FormGroup({
  start: new FormControl<Date | null>(null),
  end: new FormControl<Date | null>(null),
});

// 日期选中触发的回调函数
onDateSelected() {
  const rawStart = this.range.get('start')?.value;
  const rawEnd = this.range.get('end')?.value;

  if (rawStart) {
    // 计算当周第一天（示例按周一为周首，可自行调整周首规则）
    const startOffset = rawStart.getDay() === 0 ? 6 : rawStart.getDay() - 1;
    const adjustedStart = new Date(rawStart);
    adjustedStart.setDate(rawStart.getDate() - startOffset);
    // 加emitEvent: false避免触发无限回调
    this.range.get('start')?.setValue(adjustedStart, {emitEvent: false});
  }

  if (rawEnd) {
    // 计算当周最后一天
    const endOffset = rawEnd.getDay() === 0 ? 0 : 7 - rawEnd.getDay();
    const adjustedEnd = new Date(rawEnd);
    adjustedEnd.setDate(rawEnd.getDate() + endOffset);
    this.range.get('end')?.setValue(adjustedEnd, {emitEvent: false});
  }
}

方案2：自定义dateClass实现高亮 #

如果需要保留用户原始点击的日期记录，不想修改绑定的原始值，可以通过dateClass手动给整周范围的日期添加高亮样式：

1. 先在组件中声明调整后的周起止变量，用户选完日期后更新这两个变量
2. 实现dateClass方法，判断日期是否落在调整后的区间内，返回自定义样式类
   代码示例：

// 存储调整后的周起止日期
adjustedStart: Date | null = null;
adjustedEnd: Date | null = null;

dateClass = (date: Date): MatCalendarCellCssClasses => {
  if (!this.adjustedStart || !this.adjustedEnd) return '';
  // 日期落在调整后的周范围内就返回高亮类
  return date >= this.adjustedStart && date <= this.adjustedEnd ? 'week-range-highlight' : '';
};

在全局样式文件中添加高亮样式：

.week-range-highlight {
  background-color: rgba(25, 118, 210, 0.2) !important;
}
/* 可选：适配默认样式的圆角效果 */
.week-range-highlight:first-of-type {
  border-radius: 50% 0 0 50%;
}
.week-range-highlight:last-of-type {
  border-radius: 0 50% 50% 0;
}

注意事项 #

• 周首日的计算规则可根据业务需求调整，若需要周日作为周首，修改getDay()的判断逻辑即可
• 使用方案1时必须添加{emitEvent: false}参数，避免修改值后重复触发选中回调导致无限循环

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