13

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

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

因此，我想用其他一些快捷键替换键盘快捷键。特别是我希望用户在几天和几周之间使用箭头键导航时不必按下“控制”键。

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

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

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

是否可以配置 jQuery UI 日期选择器的快捷方式？

4

4 回答 4

8

这不能通过 datepicker 进行配置。您必须在此处更改_doKeyDown方法 源。

最简单的方法是扩展小部件。它看起来像这样：

$.extend($.datepicker, {
     _doKeyDown: function(event){
           //copy original source here with different
           //values and conditions in the switch statement
     }
});
于 2012-09-18T22:09:40.683 回答
0

你可以检查这个插件： http ://hanshillen.github.io/jqtest/#goto_datepicker

更多可访问性选项。

于 2015-08-12T15:16:34.760 回答
0

如果它是一个Jquery date picker那么默认情况下它将支持所有这些快捷方式。可能存在一个问题，即Theme. 您可以使用站点本身CSS CDN中的给定值。Jquery然后，焦点将是可见的。这是可访问性的一个很好的点击。

于 2017-08-11T10:31:20.170 回答
0

如果您想替换其中一个快捷方式并且不喜欢在更新 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
        }
    }
});

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

于 2017-11-27T13:22:19.660 回答