Angular Material 日期选择器 - 初始日期样式化

Question

Angular Material 日期选择器 - 初始日期样式化

3

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

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

如您所见，第14天单元格应用了默认的材料背景颜色。我想更改这个特定的属性。但是，当我尝试检查此元素时，由于日期选择器失去焦点（背景颜色消失，只剩下单元格上的边框），找不到该类。我已经尝试使用.mat-calendar-body-today:focus或.mat-calendar-body-hover进行调整，但它们都似乎无法在今天日期最初获得焦点时访问它。提前致谢。

- Manuel Brás

你尝试过使用 .mat-calendar-body-selected 吗？ - sekthor

@sekthor 我明白了。.mat-calendar-body-selected 似乎只在用户明确选择日期时使用。 - Manuel Brás

1

“mat-focus-indicator” 听起来也很有前途。 - sekthor

3个回答

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);
            }
          }
        }
      }

- Ivan

1

您的回答可以通过添加更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Ethan

@Ivan 谢谢你！我都快疯了，一直在试图找到这个默认背景颜色。 - Telma C.

绝对的传奇！谢谢。对于那些在处理Angular Material 15之前选定值颜色时遇到困难的人，你所要做的就是：

  &.mat-calendar-body-active {
    &:focus {
      .mat-calendar-body-cell-content:not(
          .mat-calendar-body-selected
        ).mat-focus-indicator {
        color: white !important;
      }
    }
  }
}```

- Bullsized

0

也许这可以帮助你

<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结合使用

- alin0509

虽然您的回答不是我正在寻找的，但表格单元格上的.mat-calendar-body-active类引起了我的注意。确实，这是应与.mat-calendar-body-today结合使用的类，而不是.mat-calendar-body-selected。请参见我的答案此处。 - Manuel Brás

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manuel Brás · Accepted Answer

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

实际上，这个类应该与.mat-calendar-body-today结合使用，而不是与.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;
}