天使5：如何在Mat-DatePicker中突出显示某些日期？ [英] Angular5: how to highlight certain dates in mat-datepicker?

问题描述

我正在尝试在mat-datepicker(角度为5)中预先选择一些日期这里的问题是我无法使用[dateClass]指令，因为它是角度为7的功能

<mat-form-field>
<input matInput [min]="dispoStartDate" [max]="dispoEndDate" [matDatepicker]="picker" >
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
 <mat-datepicker [dateClass]="dateClass" #picker startView="year" >
</mat-datepicker>/mat-form-field>

推荐答案

根据角度材质文档(https://material.angular.io/) 如果要突出显示日历中的特定日期，可以通过dateClass输入来实现。它接受一个函数，该函数将在日历中的每个日期调用，并将应用返回的任何类。返回值可以是ngClass接受的任何值。

HTML：

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

TS：

dateClass = (d: Date) => {
    const date = d.getDate();
    return (date === 1 || date === 20) ? 'example-custom-date-class' : undefined;
}

css：

.example-custom-date-class {
  background: orange;
  border-radius: 100%;
}

如果你想选择一个特定的日期，你可以用例如。FormControl

HTML：

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>`

TS：

date = new FormControl(new Date());

这篇关于天使5：如何在Mat-DatePicker中突出显示某些日期？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！