Quería deshabilitar los fines de semana en un calendario, estoy usando el rango de fechas pero parece que no puedo hacerlo funcionar, ¿alguien tiene una idea?
la cuestión
Can't bind to 'matDatepickerFilter' since it isn't a known property of 'input'.código #ts
weekendsDatesFilter = (d: Date): boolean => { const day = d.getDay(); /* Prevent Saturday and Sunday for select. */ return day !== 0 && day !== 6 ; }#código HTML
<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
Función que se puede usar para filtrar fechas dentro del selector de rango de fechas.
@Input() dateFilter: DateFilterFn<D>Usemos una función de devolución de llamada para filtrar las fechas que deben desactivarse.
@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>Ejemplo de trabajo: https://stackblitz.com/edit/angular-byrmnt?file=src%2Fapp%2Fdate-range-picker-overview-example.ts