我使用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 日期选择器的快捷方式?

#1楼 票数:8 已采纳

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

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

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

#2楼 票数:0

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

获取更多辅助功能选项。

#3楼 票数:0

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

#4楼 票数: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的引用,并为所有其他快捷方式调用它。

  ask by Uooo translate from so

未解决问题?本站智能推荐:

1回复

jQuery-UI的日期选择器的默认日期范围

我正在使用jQuery-UI创建日期范围字段。 我想做的是将StartDate默认为今天的日期减去7天,将EndDate默认为“今天”的日期。 如果用户想更改日期,仍然允许更改日期。 以及不允许用户选择将来的日期(今天的日期之后)。 jQuery-UI的datepicker是否可以全部实
2回复

将Jquery-UI日期选择器链接到DropDownlist

是否有人将Jquery ui datepicker链接到3个单独的下拉列表/选择列表(“年月年”),以便更改datepicker或下拉列表中的月/年将限制“天”下拉列表中的可用天数。 目前,我只有一个选择列表,其值硬编码为31,这允许一些无效的日期。 我正在使用C#和MVC。
2回复

jQuery日期选择器

我在Rails项目中使用jQuery日期选择器 ,我想禁用 previous/ past日期。 有什么办法可以做到这一点。 以及时间(如果小于当前时间)
1回复

UI日期选择器代码格式

介绍 我在我的一个应用程序中使用jQuery datepicker插件。 在一页上,它们是多个input元素,其中包含datepicker插件的实例。 但是,每个元素在datepicker属性上都设置了一些差异。 同样, onSelect事件具有一个彼此不同的功能。 例
1回复

jQuery使用getScript加载UI导致日期选择器未定义导致错误

因此,我试图创建一个可插入第三方网站的小部件,该小部件也正在使用jquery UI,但是试图使datepicker正常工作只是没有按预期的方式工作。 这是我的代码。 运行上面我得到的datepicker函数未定义。 但是如果我将datepicker函数包装在焦点事件中,即。
1回复

当从Jquery-UI着重于文本框时,如何调用日期选择器函数?

当专注于文本框时,日期选择器应出现。 该日期选择器应具有年份选项。 这是我首先尝试显示日期选择器对话框的步骤。 但是我不知道我做错了什么。 我认为我在头文件上犯了一个错误 我也想显示年份选项。 我看到了这个Jfiddle 。 但是我不知道为什么我的情况不起作用。
3回复

如何在jQuery-ui中获取日期选择器数据?

如何在jQuery ui中获取数据选择器的数据? 我有下一个代码,但仅获取默认值。 (我只用几年)
2回复

日期选择器的jQuery内联编辑

在我的页面上,有多个地方,其日期字段呈现如下: 因此,某些日期总是显示在可编辑的文本框中,而其他日期则显示为标签(然后进行内联编辑) 现在我需要实现内联编辑...即单击标签时,我想显示jQuery UI日期选择器,而在模糊时,我想隐藏... 所以我在用下面的代码; 但是,