ad-datepicker

JavaScript

アクセシブルなデートピッカーを実装できる「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

関連記事

  1. JQuery Portfolio
  2. jQuery Text Fade Delay
  3. Responsive 3d Fold Scroll
  4. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  5. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP