Угловой материал: датапикер, выделяющий выходные

Я хотел бы выделить выходные (суббота и воскресенье) в списке дат.

Я попытался переопределить фильтр lockedweekendfilter, который использует логическое значение для позиции дня 0 (воскресенье) и позиции 6 (суббота). Этот код взят с сайта Материалов версии 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;
    }
}

В идеале я хотел бы добавить класс для субботы и воскресенья в средство выбора даты, чтобы я мог изменить цвет и, возможно, фон.


person Chaco    schedule 30.07.2019    source источник
comment
Это может помочь - stackoverflow.com/questions/49761382/   -  person Jay Shukla    schedule 31.07.2019
comment
Привет, Джей Шукла, спасибо. Свойство dateClass: существует только для Материала 8. Вот почему мне пришлось указать, что я использую Материал 6.   -  person Chaco    schedule 31.07.2019


Ответы (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;}

завершите рабочий stackblitz с помощью Material 5.2.4 & angular 5.2.4

person Akber Iqbal    schedule 02.08.2019
comment
Большая помощь! Большое спасибо, Акбер! - person Chaco; 04.08.2019
comment
Вот что я сделал, используя ваш метод: .mat-calendar-table {td: nth-child (7) ›.mat-calendar-body-cell-content {color: # dfa5a5! Important; } td: first-child ›.mat-calendar-body-cell-content {color: # dfa5a5! important; }} .mat-calendar-body ›tr: first-child› td: last-child ›.mat-calendar-body-cell-content {color: # dfa5a5! important; } - person Chaco; 04.08.2019
comment
Работайте, только если неделя с 7 днями, но если 1 день, если четверг или более поздние выходные, не будет выделен - person Никита Середа; 04.06.2021