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

Issue

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.

Solution

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.

Answered By - BizzyBob