如何在角度材料的日期选择器中以今天日期突出显示蓝色自动对焦？答案

【问题标题】：How to autofocus with highlight blue color on today date in datepicker of angular material?如何在角度材料的日期选择器中以今天日期突出显示蓝色自动对焦？
【发布时间】：2019-02-06 02:52:42
【问题描述】：

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

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

this sample link is from https://material.angular.io/components/datepicker/overview

我想输出屏幕截图之类的东西，但是在选择任何其他日期后，突出显示颜色应该转到选定的日期。

【问题讨论】：

标签： angular

【解决方案1】：

对于上述情况，您需要使用 ng-deep。你在这里有两节课我们需要覆盖这些类并提供我们的样式。

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

正如名称所指定的今天的日期类 mat-calendar-body-today 被附加，并且与选定的日期类类似 mat-calendar-body-selected 被附加。

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

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

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

不只是将您的日期选择器与 [(ngModel]) 属性绑定并将该变量初始化为今天的日期。这将使今天成为选定的日期。

selectedBefore = new Date();

&lt;input matInput [(ngModel)]="selectedBefore" [matDatepicker]="beforeDate" id="beforeDate" name="before" placeholder="Before Date" (dateChange)="onDateChange($event)" disabled&gt;

【讨论】：

Actually this is not my issue, I want to highlight current date by default and when any date is selected then that highlight should transfer to selected date and only selected date should be highlighted not current date now.我想你现在明白我的要求了。
这就是您最初可以做的事情，您可以更改颜色，并且在第一次选择事件时，您可以将此类的样式更改为 display:none
实际上我不知道选择事件的确切代码以删除角度或 jquary 中突出显示的今天日期。你能把选择事件的代码发给我吗？
也覆盖这个类 mat-calendar-body-selected 并以相同的方式设置它的样式。因为这是附加到所选课程的课程。您最初只需要 .mat-calendar-body-today ...之后就没有用了，因为您将始终选择某些内容，并且选定的日期将具有此“mat-calendar-body-selected”类
您可以将（更改）或（选择）事件附加到您的日期选择器。传递事件值。从事件值中，您可以获得所有类的类列表，并且可以删除此特定类。请谷歌，这不是什么大问题，你现在可以轻松解决了。

【解决方案2】：

style.css

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

Stackblitz demo

【讨论】：

Actually this is not my issue, I want to highlight current date by default and when any date is selected then that highlight should transfer to selected date and only selected date should be highlighted not current date now.我想你现在明白我的要求了。
谢谢，但我们的要求是默认情况下当前日期应突出显示，如果选择任何其他日期，则该日期应突出显示，当前日期不应突出显示，但此处当前日期默认不突出显示关联。请让当前日期默认突出显示而不选择任何日期，当我们选择其他日期时，这个突出显示应该去。
你可以通过默认日期是今天 by date = new FormControl(new Date());再次检查链接
这里默认今天日期不应该出现在输入字段中，但是这里今天日期显示在输入字段中。我认为我们必须使用类似“选择事件来使用 jquery 或 angular 删除今天的课程”之类的东西。如果可以，请更新链接。
感谢克里希纳的合作

【解决方案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 类应用于该日期。

请记住，由于视图封装，您的 css 类可能需要位于全局文件中，而不是与您的组件关联的 css 文件中

【讨论】：