Disable dates based on array

8 posts, 1 answers
  1. Answer
    Ryan
    Ryan avatar
    3 posts
    Member since:
    Jul 2012

    Posted 05 Aug 2013 Link to this post

    Administrators of my app are able to set certain days as "off" days for our company. I would like to be able to tell the DatePicker widget that those dates should be disabled from selection. We are currently using the min/max date settings with very positive feedback but these dates fall inside of the min/max range. Any help is greatly appreciated. I am currently using validation to check if the selected date is within that range and returning an error. Unifying the experience for my users is the ultimate goal, so it's preferable the dates just be disabled from selection.

    Thanks!

    Ryan Filpi
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 07 Aug 2013 Link to this post

    Hi Ryan,

    Similar behavior is displayed in this demo, however I've taken an extra step and customized it to fit your needs better. Here is a working example.

    I hope this helps.

    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. Ryan
    Ryan avatar
    3 posts
    Member since:
    Jul 2012

    Posted 07 Aug 2013 Link to this post

    That is absolutely fantastic! 

    I slightly modified the source code you provided so that the parent is hidden (display:none) so that the dates are hidden from view like dates outside of the min/max.

    Is there a way to modify this configuration such that if a user types a date that has been disabled directly into the textbox  a null can be passed to the Kendo Validator so that it recognizes the value as being invalid (as it does for dates outside the min/max)?

    Thank you so much, Alexander.

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 09 Aug 2013 Link to this post

    Hello Ryan,

    The Kendo UI Validator supports custom validation rules. You might use them to check if the selected date matches any of the "disabled" days.
    Here is an example of how the custom rules work.

    Kind regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Alessandro
    Alessandro avatar
    2 posts
    Member since:
    Jan 2014

    Posted 18 Aug 2014 Link to this post

    Hi Alexander,

    i tried your working example but i think there's a problem: after changing the month the disabled dates are still selectable.
    For example, going from August to July (or September) and then back to August, you will find all dates selectable.

    Thank you,
    Alessandro
  7. Alessandro
    Alessandro avatar
    2 posts
    Member since:
    Jan 2014

    Posted 18 Aug 2014 in reply to Alessandro Link to this post

    Sorry Alexander, i just saw you already posted a working example on another thread.
    Thank you!
  8. Jim
    Jim avatar
    35 posts
    Member since:
    May 2011

    Posted 24 Sep 2014 Link to this post

    Where is the working thread? The one listed here doesnt disable them properly they are clickable after changing the month.
  9. Jim
    Jim avatar
    35 posts
    Member since:
    May 2011

    Posted 24 Sep 2014 in reply to Jim Link to this post

    http://www.telerik.com/forums/deactivating-dates-in-datepicker
Back to Top
Kendo UI is VS 2017 Ready