Question

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

我尝试重新调整使用boolean的一天（第0天（周日）和第6个（周六））使用boolean的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完成working stackblitz

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

1 个答案: