Angular Datepicker：修改日期范围高亮显示样式

我使用dateClass高亮一个不可选的日期范围（仅获取起止日期，打开日历后高亮二者之间的范围），当前实现代码如下：

TypeScript 代码 #

RangeClass: MatCalendarCellClassFunction<Moment> = (cellDate, view) => {
        if (view === "month") {
            const date = cellDate.toDate();
            return date >= mystart && date <= myend ? "range-class" : "";
        }

        return "";
    };

CSS 代码 #

.range-class {
  background: white;
  border: 3px solid orange;
}

HTML 代码 #

<mat-datepicker [dateClass]="RangeClass" #picker></mat-datepicker>

当前效果为每个日期单元格单独添加边框，希望修改为连续的区间高亮样式（类似选中范围的背景填充、带左右圆角的连续高亮效果）。

要实现连续的范围高亮，需要将区间内的日期拆分为起始日期、中间日期、结束日期三种状态，分别设置样式来模拟连续的视觉效果：

1. 修改 TypeScript 逻辑，区分三种日期状态 #

RangeClass: MatCalendarCellClassFunction<Moment> = (cellDate, view) => {
  if (view === "month") {
    const cellJsDate = cellDate.toDate();
    // 统一重置时分秒，避免时区导致的日期判断误差
    const cellTimestamp = cellJsDate.setHours(0, 0, 0, 0);
    const startTimestamp = mystart.setHours(0, 0, 0, 0);
    const endTimestamp = myend.setHours(0, 0, 0, 0);

    if (cellTimestamp === startTimestamp) {
      return "range-start";
    } else if (cellTimestamp === endTimestamp) {
      return "range-end";
    } else if (cellTimestamp > startTimestamp && cellTimestamp < endTimestamp) {
      return "range-middle";
    }
  }
  return "";
};

2. 编写对应 CSS 样式 #

/* 起始日期：左圆角，右侧无边框 */
.range-start {
  background-color: #ff9800;
  color: white;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-right: none;
}

/* 中间日期：左右无边框，填充背景 */
.range-middle {
  background-color: #ff9800;
  color: white;
  border-left: none;
  border-right: none;
}

/* 结束日期：右圆角，左侧无边框 */
.range-end {
  background-color: #ff9800;
  color: white;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-left: none;
}

/* 可选：切换为浅色背景高亮（匹配示例图风格） */
/* .range-start, .range-middle, .range-end {
  background-color: #fff3e0;
  color: #f57c00;
} */

/* 修复日历单元格默认内边距与样式的冲突 */
.mat-calendar-body-cell {
  padding: 0;
}

说明 #

• 通过拆分三种日期状态，分别设置圆角和边框，模拟出连续的区间视觉效果
• 若需要示例图中的浅色高亮，可注释掉橙色背景代码，启用下方的浅色样式
• 调整.mat-calendar-body-cell的内边距是为了让圆角和背景完全贴合单元格

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