This is a migrated thread and some comments may be shown as answers.

Deactivating dates in datepicker

4 Answers 360 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Patrick asked on 31 Jan 2014, 09:28 AM
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

4 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 03 Feb 2014, 11:24 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Patrick
Top achievements
Rank 1
answered on 03 Feb 2014, 12:09 PM
Thanks Alexander, that doesn't look too difficult. I'll give it a try later today. 
0
Miky
Top achievements
Rank 1
answered on 25 Jul 2014, 03:21 PM
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,

0
Alexander Popov
Telerik team
answered on 29 Jul 2014, 08:52 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Date/Time Pickers
Asked by
Patrick
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Patrick
Top achievements
Rank 1
Miky
Top achievements
Rank 1
Share this question
or