如何在角形材料的日期选择器中使用当日日期的高亮蓝色自动对焦？

Question

我希望今天的日期即使未选择也应默认突出显示。 如果我选择其他日期，则其他日期应成为突出显示。 我正在使用角形材质的日期选择器。 有什么办法吗？ 我的代码示例是：

 <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 

该示例链接来自https://material.angular.io/components/datepicker/overview

我想输出一些东西，例如屏幕快照，但是突出显示颜色应该在选择任何其他日期之后转到选定的日期。

Answer 1

在上述情况下，您需要使用ng-deep。 您在这里有两个类，我们需要重写这些类并提供样式。

1.mat-calendar-body-today 2.mat-calendar-body-selected

顾名思义，今天的日期类别附加了今天的mat-calendar-body- to和与所选日期类别相似的mat-calendar-body-selected 。

更新：-我从头开始对其进行了测试，并且可以正常工作...

在您的CSS中添加以下代码这将隐藏今天我们不需要的此类mat-calendar-body-today 。

 ::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected) { display: none; } 

不仅将您的datepicker绑定到[[ngModel]）属性，并将该变量初始化为今天的日期。 这将选择今天。

 selectedBefore = new Date(); 

 <input matInput [(ngModel)]="selectedBefore" [matDatepicker]="beforeDate" id="beforeDate" name="before" placeholder="Before Date" (dateChange)="onDateChange($event)" disabled> 

Answer 2

style.css文件

.mat-calendar-body-cell-content.mat-calendar-body-today{
  background-color: green !important;
  color: white !important;
}

Stackblitz演示

Answer 3

有一个更干净，更简单的解决方案：

@Input() dateClass  

您提供了一个针对当前显示中的每个日期调用的函数，并返回一个CSS类以应用于该日期。

例如，要突出显示今天的日期，请添加以下功能：

applyCss(d: Date): MatCalendarCellCssClasses {
    if (d == new Date()) {
        return 'your-css-class';
    }
}

在您的模板中，添加以下内容：

<mat-datepicker [dateClass]="applyCss"></mat-datepicker>

要将突出显示更改为当前选定的日期，可以将类成员绑定到日期字段，或者挂钩到matDatepickerInput的dateChange事件发射器，并且在函数中可以将css类仅应用于该日期。

请记住，由于使用了View Encapsulation，您的css类可能需要位于全局文件中，而不是与组件关联的css文件中