Disable all dates except the last date of each month in Angular Matrial Calendar component

Abdel 0
Viewed 22

There is any way to disable all dates except the last day of each month using Angular Material. I want that the user select only this specific date (last date of each month). it is possible? There is a [matDatepickerFilter] property but for a specific list of dates. Thank you.

calendar user-interface angular-material angular
1 Answers

The matDatePickerFilter is not for a list of dates, it is for a function to determine if a particular date should be selectable or not.

You can simply define a function and pass it as the matDatepickerFilter:

  isLastDayOfMonth(date: Date | null): boolean {
    date = date ?? new Date();
    const dayOfMonth = date.getDate();
    const lastDayOfMonth = getLastDayOfMonth(date);

    return dayOfMonth === lastDayOfMonth;
  };

<input matInput [matDatepickerFilter]="isLastDayOfMonth" />

Here's a StackBlitz example.

BizzyBob0
Related