Disabling datepicker dates

[Emar Wayne]

Hi,

Is there a way to disable specific dates in the Datepicker component similar to the disableDates for kendo calendar in AngularJS?

Thanks,

Wayne

[Svet]

Hi Wayne,

Unfortunately, currently there is no such feature available as a built in functionality. 

If you have the time, please support the following feature request from our UserVoice portal by commenting and/or voting:
http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback/suggestions/20593801-disable-certain-days-of-the-week-in-the-angular-2

I have also prepared an example using some custom JavaScript, that demonstrates, how we can apply a specific CSS class to a particular date (4 July 2018), so that it is disabled. Basically, on (open) event of the DatePicker we will get all td elements, that hold a date and if the title attribute of the td is equal to 'Wednesday, July 4, 2018', then we will add the '.disabled' class to the td. Check the following sample plunker demonstrating this approach:
https://plnkr.co/edit/vq30AdQVKTtYXOPQTYGV?p=preview

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Emar Wayne]

Hi Svetlin,

Thank you for the swift response. Just tested it on the application and it works flawlessly!

Regards,

Wayne

[Emar Wayne]

Hello Svetlin, upon further testing, I have noticed that the disabled dates revert back to being enabled whenever the datepicker is scrolled up (mouse scroll, keyboard navigation, etc.). At first I thought it was a problem persisting in my application but, I re-checked the link you provided and the problem occurs there as well. Can you please look into this?

Thanks,

Wayne

[Svet]

Hi Wayne,

We could further optimize the suggested approach by adding an event listener to the scrolling container that holds the months and their dates. So whenever we scroll we can add the disabled class to the required dates. Check the following updated sample plunker:
https://plnkr.co/edit/f32f4pKDf4zwVyshZdfJ?p=preview

However, do note, that the demonstrated functionality is not supported and it may not work as expected in all cases or cause some undesired effects.

Regards,
Svetlin
Progress Telerik

[Emar Wayne]

Hey Svetlin,

Thank you again for your response, it works perfectly now.

Regards,

Wayne