I wanted to disable weekends on a calendar , I am using date range but I cant seem to make it work , anyone has an idea ?
the issue
Can't bind to 'matDatepickerFilter' since it isn't a known property of
'input'.
#ts code
weekendsDatesFilter = (d: Date): boolean => {
const day = d.getDay();
/* Prevent Saturday and Sunday for select. */
return day !== 0 && day !== 6 ;
}
#html code
<mat-form-field appearance="fill" >
<mat-label>
SELECT DATES
</mat-label>
<mat-date-range-input [min]="currentDate" [rangePicker]="picker">
<input [matDatepickerFilter]="weekendsDatesFilter" matStartDate [(ngModel)]="model.proposedDateStart" placeholder="Start Date" required >
<input [matDatepickerFilter]="weekendsDatesFilter" matEndDate [(ngModel)]="dateEnd" placeholder="End Date" required>
</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>
https://material.angular.io/components/datepicker/api#MatDateRangeInput
Function that can be used to filter out dates within the date range picker.
@Input()
dateFilter: DateFilterFn<D>
Let's use a callback function to filter out dates that should be disabled.
@Component({
selector: 'date-range-picker-overview-example',
templateUrl: 'date-range-picker-overview-example.html',
styleUrls: ['date-range-picker-overview-example.css'],
})
export class DateRangePickerOverviewExample {
weekendsDatesFilter = (d: Date): boolean => {
const day = d.getDay();
/* Prevent Saturday and Sunday for select. */
return day !== 0 && day !== 6;
};
}
<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>
Working example: https://stackblitz.com/edit/angular-byrmnt?file=src%2Fapp%2Fdate-range-picker-overview-example.ts