Disabled Dates
The DateTimePicker allows you to disable the selection of specified dates by providing a disabledDates value to the component.
The DateTimePicker supports the following approaches for disabling dates:
- Using a function—The format for this input is
(date: Date) => boolean. The approach disables each date for which the provided function returnstrue. - Using an array of dates—The format for this input is
Date[]. The approach disables only the dates that are explicitly listed. - Using an array of days—The format for this input is
Day[]. The approach disables the specified days of the week.
You can also prevent the user from entering disabled dates with typing.
Using a Function
The following example demonstrates how to provide a function to disable every even date in the DateTimePicker.
Using a Date Array
The following example demonstrates how to provide an array of dates to disable the listed dates.
Using a Day Array
The following example demonstrates how to provide an array of Day enum values to disable the listed days of the week, that is, the days of the weekend.
import { Day } from '@progress/kendo-date-math';
@Component({
selector: 'my-app',
template: `
<kendo-datetimepicker
[(ngModel)]="value"
[disabledDates]="disabledDates"
>
</kendo-datetimepicker>
`
})
export class AppComponent {
public value: Date;
public disabledDates: Day[] = [Day.Saturday, Day.Sunday];
}Preventing Invalid Input
The DateTimePicker input doesn't prevent the user from entering dates, which are marked as disabled, with typing.
To avoid this behavior, use either of the following options:
- Set the
readOnlyInputproperty of the DateTimePicker totrue, allowing in this way the user to choose a date only from the popup Calendar (see example). - Use the built-in disabled dates validation to notify users that their input is invalid.
By default, forms validation is enabled. To disable it, set the disabledDatesValidation property to false.