Angular Material Datepicker - 初始日期样式答案

【问题标题】：Angular Material Datepicker - Initial date stylingAngular Material Datepicker - 初始日期样式
【发布时间】：2022-01-15 00:18:05
【问题描述】：

我想在日期选择器第一次打开并获得焦点时更改今天日期单元格的样式。

现在，当我打开日期选择器时，今天日期单元格具有以下样式：

如您所见，第 14 天单元格应用了默认材质背景颜色。

我想更改此特定属性。但是，当我尝试检查此元素时，由于日期选择器焦点丢失（背景颜色消失，仅在单元格上留下边框），因此找不到该类。

我尝试过使用.mat-calendar-body-today:focus 或.mat-calendar-body-hover，但它们似乎都没有在最初关注时访问今天的日期。

提前致谢。

【问题讨论】：

你试过.mat-calendar-body-selected吗？
@sekthor 我有。 .mat-calendar-body-selected 似乎只在用户明确选择日期时使用。
mat-focus-indicator 听起来也很有希望

标签： css angular angular-material datepicker

【解决方案1】：

根据 alin 的回答，表格单元格类 .mat-calendar-body-active 引起了我的注意。

确实，这是应该与.mat-calendar-body-today 结合使用的类，而不是.mat-calendar-body-selected。

当 datepicker 第一次像这样聚焦时，我设法访问了今天的日期单元格：

/* SCCS alternative */
.mat-calendar-body-active {
    .mat-calendar-body-today {
        color: red;
        background-color: blue;
    }
}

/* CSS alternative */
.mat-calendar-body-active > .mat-calendar-body-today {
    color: red;
    background-color: blue;
}

【讨论】：

【解决方案2】：

也许这对你有帮助

<td role="gridcell" class="mat-calendar-body-cell mat-calendar-body-active ng-star-inserted" tabindex="0" data-mat-row="2" data-mat-col="5" aria-label="January 14, 2022" aria-selected="true" aria-current="date" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;">
<div class="mat-calendar-body-cell-content mat-focus-indicator mat-calendar-body-selected mat-calendar-body-today"> 14 </div>
<div aria-hidden="true" class="mat-calendar-body-cell-preview"></div>
</td>

这是你要更新的类

.mat-calendar-body-selected {
    background-color: red;
}

所以你可以将这个.mat-calendar-body-selected 与.mat-calendar-body-today 结合起来

【讨论】：

虽然您的答案不是我想要的，但表格单元格上的 .mat-calendar-body-active 类引起了我的注意。实际上，这是应该与.mat-calendar-body-today 结合使用的类，而不是.mat-calendar-body-selected。看我的回答here。