Deactivating dates in datepicker

6 posts, 0 answers
  1. Patrick
    Patrick avatar
    3 posts
    Member since:
    Jan 2014

    Posted 31 Jan 2014 Link to this post

    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
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 03 Feb 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Patrick
    Patrick avatar
    3 posts
    Member since:
    Jan 2014

    Posted 03 Feb 2014 in reply to Alexander Popov Link to this post

    Thanks Alexander, that doesn't look too difficult. I'll give it a try later today. 
  5. Patrick
    Patrick avatar
    3 posts
    Member since:
    Jan 2014

    Posted 06 Feb 2014 in reply to Patrick Link to this post

    Hi Alexander,

    The work-around is working fine, though an out-of-the-box solution would be nice one day!

    Rather than using an array of disabled days the solution works OK if one replaces $.inArray(+data.date, data.dates) != -1 with a function to return true/false for disabled/non-disabled.

    One cosmetic error: when the datepicker opens on February the disabled dates show nicely. But if I move to March then back to February the disabled dates have moved to the left and up in their “box”, and are no longer aligned with the other dates. But OK, it’s only cosmetics.

    Another strange cosmetic error with my version of the datepicker: The short weekday header names above the dates (Su, Mo, Tu, etc. in culture “en-US”)  are left aligned, whilst the dates below them are right aligned. Why my datepicker is different from the version in the demo is a mystery!  

    I’m sure I’ll be able to fix these two cosmetic issues myself when I get some time. 

    Patrick
  6. Miky
    Miky avatar
    13 posts
    Member since:
    Dec 2011

    Posted 25 Jul 2014 Link to this post

    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,

  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 29 Jul 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready