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+矢印キー」を押す必要があることに気付くユーザーはごくわずかだと思います。

したがって、キーボードショートカットを他のショートカットに置き換えたいと思います。特に、ユーザーが数日から数週間の間、矢印キーでナビゲートするときに「Control」キーを押す必要がないようにしたいと思います。

ドキュメントでこれに関する構成が見つからなかったため、キーボードイベントをリッスンし、手動で日付を設定するカスタムjavascriptを使用してこの目的を達成しようとしました。しかし、それはある問題から別の問題につながります。

  • それは最初の日付が選択された後にのみ正常に機能します
  • ユーザーが矢印キーのみでナビゲートした後に「CTRL+矢印キー」を使用すると干渉します
  • 日付ピッカーの元のキーボードコントロールの「CTRL+矢印キー」でナビゲートする場合とは異なり、入力フィールドの日付はすぐに更新されます
  • ブラウザの他のショートカットは、次の理由で機能しませんevent.preventDefault()

この問題はすべて、追加のJavascriptによって再び解決できることを私は知っていますが、これをなんとかして構成できれば、それを望んでいます。

jQuery UI datepickerのショートカットを構成することは可能ですか？

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 に答える