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

Datepicker focuses on date closest to today

1 Answer 178 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 05 Aug 2019, 09:41 AM

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

1 Answer, 1 is accepted

Sort by
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 07 Aug 2019, 11:06 AM
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.
Tags
Date/Time Pickers
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or