Using matDatepickerFilter to filter dates for multiple views

Viewed 1084

I have an angular material datepicker on my app, for which I'm using the matDatepickerFilter:

<input matInput [matDatepicker]="myDatePicker" [matDatepickerFilter]="dateFilter.bind(this)">

On the dateFilter function, I'm checking if the date is available based on some criteria:

dateFilter(d: Date) {
  if (dateAvailable(d)) {
    return true;
  } else {
    return false
  }
}

The issue is that this same filter is being called for each day on each of the calendar views (month, year and multi-year). For example: changing from month view to multi-year view, triggers the filter 8766 times (one for each day, of each month, of each year).

This is taking a lot of time and performance, as it is checking each day on year or multi-year view, while checking only the year/month would be sufficient. But as matDatepickerFilter only support a date parameter, I can't differentiate which view is being currently filtered (also couldn't find anyway to get the current view).

How may I efficiently filter dates according to view?

I mean:

  • On month view: filter by each day
  • On year view: filter only by year/month
  • On multi-year view: filter only by year

Thanks in advance!

0 Answers
Related