jQuery UI日期選擇器：配置鍵盤快捷鍵

Question

我使用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 +箭頭鍵」來選擇一個日期。

因此，我想用其他一些替換鍵盤快捷鍵。特別是我希望用戶在幾天和幾周之間用箭頭鍵導航時不必按「控制」鍵。

因爲我沒有在文檔中找到任何有關此配置的配置，我在這裏查看鍵盤事件並手動設置日期。但它會導致從一個問題到另一個問題：

• 被選爲第一次約會後，它只是做工精細
• 當用戶使用箭頭鍵導航後使用「Ctrl +箭頭鍵」它干擾只
• 在輸入字段中的日期會立即更新，隨着日期選擇器的原始鍵盤控制的「CTRL +箭頭鍵」
• 瀏覽器的其他快捷方式不會因爲工作航行時不像event.preventDefault()

我知道所有這些問題都可以通過再次使用Javascript來解決，但是如果我能以某種方式配置它，我更喜歡它。

是否可以配置jQuery UI datepicker的快捷鍵？

Answer 1

這不能通過datepicker進行配置。您必須更改_doKeyDown方法source here。

最簡單的方法是擴展小部件。這將是這個樣子：

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

Answer 2

你可以檢查這個附加： http://hanshillen.github.io/jqtest/#goto_datepicker

更多的輔助功能選項。

Answer 3

如果它的一個Jquery date picker那麼默認情況下它將支持所有這些快捷方式。有一個問題可能存在，即Theme。您可以使用Jquery網站本身給出的CSS CDN。然後，焦點甚至可以看到。這對於輔助功能來說是一個很棒的點擊。

Answer 4

如果你想更換一個快捷方式，不喜歡應付從資源庫中的代碼更新了jQuery UI庫，使用的情況：你之前

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

保持參考_doKeyDown覆蓋它並將其稱爲所有其他快捷方式。