css - Angular Material : datepicker highlighting weekends

Question

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

我已经尝试重新调整 lockedweekendfilter，它使用 bool 值作为日位置 0(星期日)和位置 6(星期六)。此代码来自 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;}

完成working stackblitz使用 Material 5.2.4 和 angular 5.2.4