Datepicker focuses on date closest to today

[Grant]

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

[Alex Hajigeorgieva]

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