javascript jQuery UI datepicker:配置键盘快捷键

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12459562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 16:15:37  来源:igfitidea点击:

jQuery UI datepicker: Configure keyboard shortcuts

javascriptjqueryjquery-ui

提问by Uooo

I use the jQuery UI datepickerto let the user select a date. It has some shortcuts so that it can be controlled using the keyboard:

我使用jQuery UI datepicker让用户选择一个日期。它有一些快捷方式,以便可以使用键盘进行控制:

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.

但对我来说似乎不是用户友好的。直到我在文档中阅读它,我才知道如何使用键盘选择日期。我想只有少数用户会发现他们必须按“CTRL + 箭头键”才能选择日期。

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:

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

  • 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()
  • 它只有在选择第一个日期后才能正常工作
  • 当用户仅使用箭头键导航后使用“CTRL + 箭头键”时,它会干扰
  • 输入字段中的日期会立即更新,这与使用日期选择器原始键盘控件的“CTRL + 箭头键”导航时不同
  • 浏览器的其他快捷方式不起作用,因为 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.

我知道所有这些问题都可以通过额外的 Javascript 再次解决,但如果我能以某种方式配置它,我会更喜欢它。

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

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

采纳答案by Nal

This is not configurable through datepicker. You would have to change the _doKeyDownmethod source here.

这不能通过日期选择器进行配置。您必须在此处更改_doKeyDown方法

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

回答by adir kandel

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

你可以检查这个附加组件:http: //hanshillen.github.io/jqtest/#goto_datepicker

for more accessibility options.

获取更多辅助功能选项。

回答by lokanath das

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

如果是,Jquery date picker则默认情况下它将支持所有这些快捷方式。可能存在一个问题,即Theme. 您可以使用Site 本身中的CSS CDN给定Jquery。然后,焦点将甚至可见。这是辅助功能的绝佳点击。

回答by Jannes Botis

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:

如果要替换快捷方式之一并且不喜欢在更新 jquery ui 库的情况下处理存储库中的代码,请使用:

// 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 _doKeyDownbefore you overwrite it and call it for all other shortcuts.

在覆盖之前保留对_doKeyDown的引用,并为所有其他快捷方式调用它。