Отключение будущих дней с помощью Angular mwl-calendar-month-view

Question

Можно ли отключить день в Mat-Calendar? Наш проект позволяет сотруднику установить Временной Ввод на фактические и прошлые дни, но он или она не может сделать это в будущие дни ...

Вот так ... Сегодня 27-е, а завтра он не может открыть 28-й день

Редактировать: Извините, я проверял код, а не мат-календарь ... это mwl-calendar-month-view

Answer 1

Добавить функцию для фильтрации дат в вашем компоненте. Эта функция возвращает true, чтобы включить дату, и false, чтобы отключить ее.

filterDates = (date: Date): boolean => {
  let today = new Date();
  return date < today;
}

и привязать ее к mat-calendar:

<mat-calendar ... [dateFilter]="filterDates"></mat-calendar>

Answer 2

Это может быть возможно, если вы подключитесь к beforeViewRender и примените некоторые CSS правила

Шаблон:

<mwl-calendar-month-view (beforeViewRender)="applyDateSelectionPolicy($event)">
</mwl-calendar-month-view>

TS:

  dateIsValid(date: Date): boolean {
    return date.getTime() < new Date().getTime();
  }

  applyDateSelectionPolicy({ body }: { body: CalendarMonthViewDay[] }): void {
    body.forEach(day => {
      if (!this.dateIsValid(day.date)) {
        day.cssClass = 'disabled-date';
      }
    });
  }

CSS:

.disabled-date{
 opacity: .5;
 pointer-events: none;
}