jQuery UI datepicker:配置键盘快捷键 [英] jQuery UI datepicker: Configure keyboard shortcuts

问题描述

我使用 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

但是，这对我来说似乎并不友好.在文档中阅读该日期之前，我没有发现自己如何使用键盘选择日期.我猜只有很少的用户会发现他们必须按"CTRL +箭头键"来选择日期.

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.

因此，我想将键盘快捷键替换为其他快捷键.特别是我希望用户在几天和几周之间使用箭头键导航时不必按下"Control"键.

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.

因为我没有在文档中找到与此相关的任何配置，所以我尝试使用一些自定义javascript来实现此目标，我在这里监听键盘事件并手动设置日期.但这从一个问题引向另一个问题:

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:

• 只有在选择了第一个日期后，它才能正常工作
• 仅在使用箭头键导航后用户使用"CTRL +箭头键"时会产生干扰
• 与使用日期选择器原始键盘控件的"CTRL +箭头键"进行导航时不同，输入字段中的日期将立即更新
• 由于event.preventDefault()
，浏览器的其他快捷方式不起作用

• 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()

我知道所有这些问题都可以通过附加的Javascript再次解决，但是如果我可以以某种方式进行配置，我希望使用它.

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.

是否可以配置jQuery UI datepicker的快捷方式?

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

推荐答案

这不能通过datepicker进行配置.您必须更改_doKeyDown方法在这里.

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

这篇关于jQuery UI datepicker:配置键盘快捷键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！