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!