Question

I use the jQuery UI datepicker to let the user select a date. It has some shortcuts so that it can be controlled using the keyboard:

page up/down      - previous/next month
ctrl+page up/down - previous/next year
ctrl+home         - current month or open when closed
ctrl+left/right   - previous/next day
ctrl+up/down      - previous/next week
enter             - accept the selected date
ctrl+end          - close and erase the date
escape            - close the datepicker without selection

But it seems not user friendly for me. I did not find out myself how to select a date with the keyboard until I read it in the documentation. I guess only few users will find out that they have to press “CTRL + arrow keys” to select a date.

Therefore, I would like to replace the keyboard shortcuts with some other ones. Especially I would like that the user does not have to press the “Control” key when navigating with the arrow keys between days and weeks.

Because I did not find any configuration about this in the documentation, I tried to achieve this aim using some custom javascript, where I listen for keyboard events and set the date manually. But it leads from one problem to another:

• It does only work fine after the first date was selected
• It interferes when the user uses “CTRL + arrow keys” after navigating with arrow keys only
• The date in the input field is immediately updated, unlike when navigating with “CTRL + arrow keys” of the datepicker’s original keyboard control
• Other shortcuts of the browser do not work because of event.preventDefault()

I know that all of this problems can be solved by additional Javascript again, but I would prefer it if I could just configure this somehow.

Is it possible to configure the shortcuts of the jQuery UI datepicker?

Answer 1

This is not configurable through datepicker. You would have to change the _doKeyDown method source here.

The easiest way to do this would be to extend the widget. It would look something like this:

$.extend($.datepicker, {
     _doKeyDown: function(event){
           //copy original source here with different
           //values and conditions in the switch statement
     }
});