如何在Angular Material Datepicker中从今天的日期中移除焦点？

Posted 2023-05-07

【中文标题】如何在Angular Material Datepicker中从今天的日期中移除焦点？

【英文标题】：How to remove the focus from today's date in Angular Material Datepicker?

【发布时间】：2021-12-27 18:15:48

【问题描述】：

在使用 Angular Material 日期选择器时，是否可以取消对今天日期的关注？我尝试将以下属性添加到 mat-datepicker 但似乎没有任何效果，我找不到这样做的方法：

restoreFocus="false" [startAt]="null"

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

例如，我不希望下图中的 16 上的焦点/背景。

我需要这样做，因为我正在尝试使用 Angular Material 日期选择器让用户输入他们的出生日期，而在这种情况下，关注今天的日期是无关紧要的。

【参考方案1】：

在你的项目的style.css文件中应用这个类，然后重新运行项目。基本上你需要改变默认的css类实现。

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) 
  background-color: rgb(255 255 255) !important;
  border: none !important;