Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI datepicker: Configure keyboard shortcuts

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?

like image 275
Uooo Avatar asked Sep 17 '12 12:09

Uooo


People also ask

How can change date format in jQuery ui datepicker?

inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });

How do I change the pop position in jQuery datepicker control?

To change the position of the jQuery UI Datepicker just modify . ui-datepicker in the css file. The size of the Datepicker can also be changed in this way, just adjust the font size.

What is minDate and maxDate in jQuery datepicker?

If you like to restrict access of users to select a date within a range then there is minDate and maxDate options are available in jQuery UI. Using this you can set the date range of the Datepicker. After defining these options the other days will be disabled which are not in a defined range.

How do I initialize a datepicker?

For most datepickers, simply set data-provide="datepicker" on the element you want to initialize, and it will be intialized lazily, in true bootstrap fashion. For inline datepickers, use data-provide="datepicker-inline" ; these will be immediately initialized on page load, and cannot be lazily loaded.


1 Answers

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
     }
});
like image 154
Nal Avatar answered Nov 15 '22 15:11

Nal