kendo date range disabled dates

[Tera]

How to disabled dates before today in kendo date range with date input?

[Martin Bechev]

Hi Tera,

The DateInput component cannot show specific dates in a calendar way. That is why I assume you are referring to the DatePicker component.

In order to achieve the desired outcome, use a function to disable the dates.

In the function, you can define which dates to be disabled (not only specific, single dates). For example, the following logic disables all dates before February 2024 and after February 2024 and some custom dates (such as 10-th February in this case):

public disabledDates = (date: Date): boolean => {
    return (
      date > new Date(2024, 1, 28) ||
      date < new Date(2024, 1, 1) ||
      this.isDateInArray(date)
    );
  };

  isDateInArray(targetDate: Date): boolean {
    return this.disabled.some(
      (date) => date.getTime() === targetDate.getTime()
    );
  }

Here is an example:

https://stackblitz.com/edit/angular-kvewii

I hope this helps.

Regards,
Martin
Progress Telerik