I am currently using a mat date picker range with specific logic. The minimum date that a user can select on the calendar is set to + 2 days. For example, if today's date is July 20, 2022, the minimum selectable date would be July 22, 2022.
However, if the next 2 days after the current date fall on weekends, they should be excluded from selection. For instance, if today is July 22, 2022 and the following two days (July 23 and July 24) are weekends, then the new minimum selectable date should start from July 22, 2022, skipping the weekend days, and extend to July 25, 2022, making the new minimum date July 26, 2022.
I am looking for suggestions on how to implement this logic in a date picker.
#html
<mat-form-field>
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [rangePicker]="picker" [dateFilter]="weekendsDatesFilter">
<input matStartDate matInput placeholder="Start date" >
<input matEndDate matInput placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
#ts
export class DateRangePickerOverviewExample {
currentDate = new Date();
ngOnInit(): void {
this.currentDate = new Date(this.currentDate.setDate(this.currentDate.getDate() + 2));
}
weekendsDatesFilter = (d: Date): boolean => {
const day = d.getDay();
/* Prevent Saturday and Sunday for select. */
return day !== 0 && day !== 6;
};
}