Angular5:如何在mat-datepicker中突出显示某些日期？

Question

我正在尝试在mat-datepicker (angular 5)中预先选择一些日期这里的问题是我不能使用dateClass指令，因为它是angular 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>

Answer 1

根据angular material documentation (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());

Answer 2

我也有类似的问题，但是日期范围选择器。我可以断定dateClass回调正在工作，因为我从回调中向控制台记录了一条消息。然而，我所应用的样式并没有显示在日历中。解决方案:确保您包括：

import {ViewEncapsulation} from "@angular/core"/; 


@Component({
  selector: 'app-doughnut-chart',
  templateUrl: './doughnut-chart.component.html',
  styleUrls: ['./doughnut-chart.component.scss'],
  encapsulation:ViewEncapsulation.None
})

注意ViewEncapsulation的导入和@Component装饰器的configuration对象中的封装属性。

当我确保包含它时，它为我解决了这个问题。