Angular material: 日期选择器突出显示周末

Question

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

我已经尝试重新调整 lockedweekendfilter，它使用布尔值作为日位置 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;
    }
}

理想情况下，我想在日期选择器中为星期六和星期日添加一个 class，这样我就可以更改颜色，也许还可以更改背景。

Answer 1

这仅使用 CSS... 扩展共享示例

即可

相关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

Angular material: 日期选择器突出显示周末

Angular material: datepicker highlighting weekends

css

angular

typescript

angular6

angular-material-6