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>

CodePudding user response：

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/app/date-range-picker-overview-example.ts