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?

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?

• javascript
• jquery
• jquery-ui

• 2 FWIW I think your keyboard shortcuts are actually much more intuitive than the built in ones. – Andrew Whitaker Commented Sep 17, 2012 at 13:41

4 Answers 4

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
     }
});

you can check this add-on: http://hanshillen.github.io/jqtest/#goto_datepicker

for more accessibility options.

If its a Jquery date picker then by default it will support all of these shortcut. One issue might be there, i.e. Theme. You can use the CSS CDN given in Jquery Site itself. Then, focus will be visible even. Which is a great click for Accessibility.

If you want to replace one of the shortcuts and do not like coping the code from the repository in case of updating the jquery ui library, use:

// original key down callback
var doKeyDown = $.datepicker._doKeyDown;
$.extend($.datepicker, {
    _doKeyDown: function(event){

        if(event.which !== $.ui.keyCode.ENTER) {
            doKeyDown(event);
        }
        else {
            //do something else
        }
    }
});

Keep a reference of _doKeyDown before you overwrite it and call it for all other shortcuts.