Disabling Different Ranges of Dates in Kendo DatePicker

Environment

Description

How can I disable different date ranges in the Kendo DatePicker component?

Solution

To disable different ranges of dates and limit the date selection, you can set the disabledDates property to a custom function.

1. Set the disabledDates property to a custom function.

   Copy Code <kendo-datepicker ... [disabledDates]="disableRanges"></kendo-datepicker>

2. Inside the function, use conditional statements to define the disabled dates. For example, you can limit the date selection to a 30-day time period starting today. To achieve this, you will need to disable all dates before today and after 30 days by using the following logic:

   Copy Codepublic disableRanges = (date: Date): boolean => {
       const today = new Date();
       const thirtyDaysFromNow = new Date();
       thirtyDaysFromNow.setDate(today.getDate() + 30);
   
     return date < today || date > thirtyDaysFromNow;
   };

3. Now, the DatePicker component will disable all dates before today and after 30 days.

See Also

• Kendo UI for Angular DatePicker Documentation