jQuery UI datepicker: Configure keyboard shortcuts

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         


        

Answer 1

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.

Answer 2

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

Answer 3

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

for more accessibility options.

Answer 4

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.