Deactivating dates in datepicker

[Patrick]

I can see this has been asked before, but perhaps there is something new?

It would be more than nice to be able to deselect given dates from the datepicker. For example the possibility to deselect all Saturdays, Sundays and public holidays, so the user can only select office days. Of course one can (and should) check the date server-side, but it looks unprofessional that the user can select a date in the datepicker, which then gives an error server-side.

jQueryUI offers this functionality. One just needs to write a Javascript function which returns true/false for selectable/non-selectable, and then pass this to the datepicker
through beforeShowDate. So I could use jQueryUI and restyle to resemble Kendo, but . . .

Thank you in advance for any help you can give.
Patrick

[Alexander Popov]

Hi Patrick,

Although this behavior is currently not supported out of the box it could be achieved using a custom solution, as seen in this example.

Regards,
Alexander Popov
Telerik

[Patrick]

Thanks Alexander, that doesn't look too difficult. I'll give it a try later today. 

[Miky]

Hi,

I tried the example link and discovered another problem.
The disabled dates are 2/20/2014, 2/21/2014, 2/22/2014.
Now if you go in February, you can't select the dates.
Now move to January, select 20, then open the calendar and move back to February, click on 20 and there it's selected.
also, it doesn't prevent you from typing the date and still stays valid.


I think the proper action would not be to only disable them but treat them as invalid dates too.

Regards,

[Alexander Popov]

Hello Miky,

This happens because the calendar is redrawn when navigating back and forth, however the open event is triggered only once. I would recommend subscribing to the navigate event of the Calendar used by the DatePicker widget, as shown in this updated example. The dates option is used to pass a list of dates to the template, and it is not designed to prevent the user from typing in any of the listed values. Similar behavior could achieved either by using a Kendo UI Validator to check the value and display a validation message, or by subscribing to the DatePicker's change event and doing the same. For example: 

$("#datepicker").kendoDatePicker({
    dates: disabledDays,
    change: function(){
        if(this.options.dates.indexOf(+this.value()) >= 0){
          this.value(null); //clear the selected value
        }
    },
    ...
});

Regards,
Alexander Popov
Telerik