Question

我正在尝试在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>

Answer 1

根据棱角材料文档（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
})

注意 @Component 装饰器的配置对象中 ViewEncapsulation 和 encapsulation 属性的导入。

当我确定包含它时，它为我解决了问题。

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

2 个答案: