Datepicker focuses on date closest to today

2 posts, 1 answers
  1. Grant
    Grant avatar
    125 posts
    Member since:
    Jul 2016

    Posted 05 Aug Link to this post

    Hi, 

    I'd like to know why the Datepicker auto focuses on the date closest to today's date?
    See my example here, https://dojo.telerik.com/abijIxUH.

    In my scenario, this auto focus could be misunderstood as a suggested date, when that is not the case.

    How can the initial focused date be unfocused?

    Thanks,
    Grant

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    725 posts

    Posted 07 Aug Link to this post

    Hi, Grant,

    The Kendo UI DatePicker is one of the open source widgets and the code is available in our public repository. To answer your question why it focuses the specific dates as demonstrated in your example, it is because of this calendar function:

    https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.calendar.js#L148
    https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.calendar.js#L1754-L1767

    // currently line 148
     that._current = new DATE(+restrictValue(value, options.min, options.max));
     
    // currently line 1754
     function restrictValue (value, min, max) {
        var today = getToday();
     
        if (value) {
            today = new DATE(+value);
        }
     
        if (min > today) {
            today = new DATE(+min);
        } else if (max < today) {
            today = new DATE(+max);
        }
        return today;
    }

    According to accessibility guidelines, a focused cell should exist as a visual reference to facilitate keyboard navigation and aid the user to know where they are in the grid at all times. It also comes with ARIA attributes and text that will be read by screen readers.

    If you remove the style completely, the widget will no longer comply with accessibility requirements. It can be done with a CSS override if keyboard navigation is not important for you with this CSS rule altogether:

    <style>
     .k-calendar td.k-state-focused:not(.k-state-selected) .k-link {
        box-shadow: none;
     }
    </style>

    Alternatively, you may keep the focused cell but tone the border color down to a more acceptable level for you and your users, for example lightgray:

    <style>
     .k-calendar td.k-state-focused:not(.k-state-selected) .k-link {
        box-shadow: inset 0 0 2px 1px lightgray;
     }
    </style>

    Finally, you could set the focus elsewhere on open (for example in a date that is outside the min/max range). This way when it is first opened, you will not see it, however on navigate it will show up again:

    // executed on open
     var pickerOne = $("#datepicker").kendoDatePicker({
       date: new Date(2019,7,1),
       min: new Date(2019,7,10),
       open: function(e){
         this.dateView.current(new Date())
       }
     }).data("kendoDatePicker");

    Here is the updated example: https://dojo.telerik.com/@bubblemaster/edIJehEL

    Let me know what you think and in case you have further questions.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top