アクセシブルなデートピッカーを実装できる「ad-datepicker」

ad-datepicker

ad-datepickerはアクセシブルなデートピッカーを実装できるjQueryプラグインです。オプションもたくさん用意されているので、カスタマイズ性にも優れています。キーボード操作にも対応しているのでキーボードを使ってサクサク操作したい人にはとても使いやすいデートピッカーになるのではないでしょうか?

デモ

デモではDateと書かれた所にボックスが設置されており、ボックス右側のアイコンをクリックするとカレンダーが表示されます。目的の日付をクリックすることでその日付を選択できます。

また、カレンダー内の操作はキーボードからも行うことが可能です。上下左右キーからカーソルを動かすことができ、特定の日付にカーソルを合わせた状態でenterキーもしくはspaceキーを押せばその日付を選択することができます。

そのほか、多言語にも対応していたり豊富なオプションが用意されたりとカスタマイズ性の高いデートピッカーに仕上がっています。

主なオプション項目は、buttonLabel、buttonTitle、changeMonthButtonLabel、changeRangeButtonLabel、changeYearButtonLabel、closeButtonLabel、closeButtonTitle、datesDisabled、daysOfWeekDisabled、firstDayOfWeek、gainFocusOnConstruction、inline、inputFormat、isDateDisabled、isMonthDisabled、isYearDisabled、max、min、modal、next、nextButtonLabel、nextMonthButtonLabel、nextYearButtonLabel、onUpdate、outputFormat、prevButtonLabel、previous、prevMonthButtonLabel、prevYearButtonLabel、startView、theme、titleFormat、weekDayFormatです。

ad-datepicker

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives