mat-date-range-input 角度 10 中的颜色特定日期

Question

我目前正在开发一个项目，该项目涉及使用 Angular Material 的 MatDatePicker（范围选择）组件来显示具有特定日期的自定义样式的日历。我在尝试根据特定条件将自定义 CSS 类应用到某些日历单元格时遇到了问题。

这是我的代码片段：

 <mat-form-field appearance="outline" class="col-3 date-picker" (click)="picker2.open()">
          <mat-label>start date</mat-label>
          <mat-date-range-input class="special-element" [rangePicker]="picker2" [dateFilter]="dateFilter">
            <input matEndDate
              [readonly]="true" (dateChange)="changeDate('endDate')">
            <input matStartDate (dateChange)="changeDate('startDate')"[readonly]="true">

          </mat-date-range-input>

          <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
          <mat-date-range-picker #picker2></mat-date-range-picker>
        </mat-form-field>

请问有什么建议吗？

Answer 1

您可以在全局中添加 .

mat-calendar-body-cell-container

css

声明

styles.css

。

.mat-calendar-body-cell-content {
  color: white;
}


.mat-calendar-body-cell-container {
  background-color: green !important;
}

编辑：

您可以执行以下操作：

export class YourComponent implements AfterViewInit {
  range =  new FormGroup({
    start: new FormControl(), end: new FormControl()
  });

  @ViewChild('picker2') picker!: MatDatepicker<Date>;

  ngAfterViewInit(): void {
    this.picker.dateClass = (date: Date) => {
      return {
        ['cell-class']: (date.getDate() % 2 === 0)
      }
    }
  }
}

然后在您的全局

styles.css

上您可以定义

cell-class

。

.cell-class {
    background-color: red !important /* you must include important */
}

参考：MatCalendarCellClassFunction