Angular Material Datepicker - 初始日期样式

Question

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

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

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

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

我试过 .mat-calendar-body-today:focus 或 .mat-calendar-body-hover，但它们似乎都无法访问最初聚焦的今天日期。

提前致谢。

Answer 1

也许这可以帮到你

<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>

这是您要更新的class

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

因此您可以将此 .mat-calendar-body-selected 与 .mat-calendar-body-today

结合使用

Answer 2

在 alin 的回答之后，table 单元格 class .mat-calendar-body-active 引起了我的注意。

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

当日期选择器首次聚焦时，我设法访问了今天的单元格，如下所示：

/* 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;
}

Answer 3

对我有用

.mat-calendar-body-cell:not(.mat-calendar-body-disabled) {

        &.mat-calendar-body-active {
          &:focus {
            .mat-calendar-body-cell-content:not(.mat-calendar-body-selected).mat-focus-indicator.mat-calendar-body-today {
              background-color: rgba(0,0,0,.04);
            }
          }
        }
      }

Angular Material Datepicker - 初始日期样式

Angular Material Datepicker - Initial date styling

css

angular

angular-material

datepicker