如何在角材料的日期选择器中以今天的日期突出显示蓝色自动对焦? [英] How to autofocus with highlight blue color on today date in datepicker of angular material?

问题描述

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

<input matInput [matDatepicker]="picker" placeholder="选择日期"><mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle><mat-datepicker #picker></mat-datepicker></mat-form-field>

解决方案

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

1.mat-calendar-body-today2.mat-calendar-body-selected

如名称指定的今天的日期类 ma​​t-calendar-body-today 被附加，并且类似地附加到选定的日期类 ma​​t-calendar-body-selected 被附加.

更新:-我已经从我的最后测试了它并且它有效......

在你的css中添加以下代码这将隐藏我们不需要的 ma​​t-calendar-body-today 类.

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

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

selectedBefore = new Date();

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

I want today date should be highlighted by default even without selecting it. and if i'll select other date then other date should become highlight. I am using angular material datepicker. Is there any way to do it? My code sample is:

<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

I want output some thing like the screen shot, but highlight color should be go to selected date after selecting any other date.

解决方案

You need to use ng-deep for the above case. You have two classes here We need to override these classes and provide our styles.

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

As the name specifies to today's date class mat-calendar-body-today is attached and Similarly to selected date class mat-calendar-body-selected is attached.

Update:- I have tested it from my end and it works...

Add below code in your css This will hide this class mat-calendar-body-today which we don't need.

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

Not just bind your datepicker with an [(ngModel]) attribute and initialize that variable to today's date. This will make today's day as selected.

selectedBefore = new Date();

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

这篇关于如何在角材料的日期选择器中以今天的日期突出显示蓝色自动对焦?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！