Angular 材料：突出显示周末的日期选择器

Question

我想在日期选择器上突出显示周末（周六和周日）。

我尝试重新调整使用布尔值表示日期位置 0（星期日）和位置 6（星期六）的lockedweekendfilter。此代码来自 Material 站点版本 6。但是，它仅适用于禁用日期。我不想禁用周日和周六。

@Injectable()
export class InjectDatePickerGeneral {
    constructor() {}

    lockedWeekendFilter(d: Date): boolean {
        const date = new Date(d);
        const day = date.getDay();
        // Prevent Saturday and Sunday from being selected.
        return day !== 0 && day !== 6;
    }
}

理想情况下，我想在日期选择器中添加周六和周日的课程，这样我就可以更改颜色，也许还可以更改背景。

Answer 1

仅使用 CSS 就可以实现...扩展共享的示例 here

相关CSS：

::ng-deep .mat-calendar-body > tr > td:nth-child(6) > .mat-calendar-body-cell-content,
::ng-deep .mat-calendar-body > tr > td:nth-child(7) > .mat-calendar-body-cell-content { color:red !important; }
::ng-deep .mat-calendar-body > tr > td:nth-child(6),
::ng-deep .mat-calendar-body > tr > td:nth-child(7) {  background: lightyellow;}

使用 Material 5.2.4 和

angular 5.2.4

 完成

工作堆栈闪电战

Answer 2

为了让CSS每个月都能正常工作，可以使用“dateClass”属性。

<!-- HTML -->
<mat-datepicker [dateClass]="dateClass"></mat-datepicker>

//TS
dateClass = (d: Date) => {
    const date = d.getDay();
    return date === 0 || date === 6 ? "weekend" : "weekday";
  };

/* CSS */
.weekend > .mat-calendar-body-cell-content {
  color: red
}
.weekday > .mat-calendar-body-cell-content {
  color: blue
}

参考资料：

https://material.angular.io/components/datepicker/api https://www.angularjswiki.com/material/datepicker/