[Fixed] Angular Kendo UI Datepicker – Disable two date ranges

Issue

I’ve seen the docs for creating a function to set a single disabled date range, but I’m trying to disable two ranges (disable all dates before minDate and all dates after maxDate). This is what I’m trying:

<kendo-datepicker [disabledDates]="disabledDates"></kendo-datepicker>

TS:

public disabledDates = (date: Date): boolean => {
return date < this.minDate && date > this.maxDate;
  }

I know there’s a way to set a min/max range in the html, but that makes the disabled dates disappear. I want to still see the dates as disabled.

Does anyone have a solution for this? Thanks in advance!

Solution

You can do it almost exactly like in the code you wrote, only there is a small mistake you made. You need to replace the && with ||:

return date < this.minDate || date > this.maxDate;

The two ranges are exclusive so using && returns false for every date.

Leave a Reply

(*) Required, Your email will not be published