jQuery UI datepicker: Configurar atajos de teclado

Question

Uso el jQuery UI datepicker para permitir que el usuario seleccione una fecha. Tiene algunos atajos para que se pueda controlar con el teclado:

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 

Pero parece que no es fácil de usar para mí. No descubrí cómo seleccionar una fecha con el teclado hasta que la leí en la documentación. Supongo que solo unos pocos usuarios descubrirán que tienen que presionar "CTRL + teclas de flecha" para seleccionar una fecha.

Por lo tanto, me gustaría reemplazar los atajos de teclado con algunos otros. Especialmente me gustaría que el usuario no tenga que presionar la tecla "Control" cuando navegue con las teclas de flecha entre días y semanas.

Porque no encontré ninguna configuración sobre esto en la documentación, I tried to achieve this aim using some custom javascript, donde escucho los eventos del teclado y configuro la fecha manualmente. Pero conduce a un problema a otro:

• Es solo funciona bien después de que se ha seleccionado la primera fecha
• Interfiere cuando el usuario utiliza "CTRL + teclas de flecha" después de navegar con las teclas de flecha única
• la fecha en el campo de entrada se actualiza inmediatamente, a diferencia de cuando se navega con las teclas de flecha "CTRL +" de control del teclado original del selector de fecha
• Otros atajos del navegador no funciona debido a event.preventDefault()

Sé que todos estos problemas pueden resolverse con Javascript adicional nuevamente, pero preferiría que pudiera configurar esto de alguna manera.

¿Es posible configurar los accesos directos del jQuery UI datepicker?

Answer 1

Esto no se puede configurar a través de datepicker. Debería cambiar el método _doKeyDownsource here.

La forma más fácil de hacerlo sería ampliar el widget. Se vería algo como esto:

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

Answer 2

se puede comprobar que este complemento: http://hanshillen.github.io/jqtest/#goto_datepicker

para más opciones de accesibilidad.

Answer 3

Si es un Jquery date picker entonces de forma predeterminada admitirá todos estos accesos directos. Un problema podría estar allí, es decir, Theme. Puede usar el CSS CDN dado en el sitio Jquery. Entonces, el enfoque será visible incluso. Lo cual es un excelente clic para accesibilidad.

Answer 4

Si desea reemplazar uno de los accesos directos y no les gusta hacer frente el código desde el repositorio en el caso de la actualización de la biblioteca jquery ui, utilice:

var doKeyDown = $.datepicker._doKeyDown; 
$.extend($.datepicker, { 
    _doKeyDown: function(event){ 
     console.log(event.which); 
     if(event.which !== $.ui.keyCode.ENTER) { 
      doKeyDown(event); 
     } 
     else { 
      //do something else 
     } 
    } 
}); 

mantener una referencia de _doKeyDown antes sobrescribirlo y llamarlo para todos los demás accesos directos.