[jQuery] Datepickerは何を使えばいいのか

業務系のウェブアプリケーションでの日付入力はDatepickerが便利でよく使ってる。
インプットにフォーカスするとカレンダーがでてくるアレ。
たぶん、制作側も使用者側もDatepickerだと比較的幸せなはず。(セレクトボックスを三つ並べたアレよりは)

#Datepickerについて

偏にDatepickerといっても種類が色々とあって、有名どころだと、jQuery UIのDatepickerがある。
検索結果でも一番上にくるし、情報量も一番多いと思うので、Datepickerを初めて使うとか、jQuery UIを呼んでるとかであれば使って損はないと思う。ただ、自分はあまりjQuery UIを使う機会がないので、必要に迫られてないので避けたい。

最近は脱jQueryの傾向もあってか、JavaScriptのDatepickerも見かける。jQueryを使わない場合はそういう選択肢もあると思う。

開発の環境に合わせて選択するのが一番良い。

#採用条件

#言語

海外のエンジニアが作ってて、ドキュメントなんかが英語なのは別に問題はないんだけど、月や曜日なんかがこんな感じで英語なのは困る。

Su Mo Tu We Th Fr Sa

保守を考えると、英語部分を直書きで日本語に書き換えるのは好ましくない。
ローカライズできるような形で制作されているものを採用するのが良い。

#Bootstrapとの親和性

個人的に仕事とかでウェブアプリケーションを作るときは、CSSフレームワークにBootstrapを使うことが多い。なので、個人的にはBootstrapと親和性の高いものだと尚良い。

#bootstrap-datepicker

自分なりの条件に合致するものとして、Datepicker for Bootstrapを使ったりしていた。シンプルでいい感じだったんだけど、いっとき更新が止まっているみたい。(2013年3月)
(この手のやつはBootstrap 2.xに合わせたまま更新が止まっているものは多い)

Github見てたら、このDatepicker for Bootstrapをフォークしたbootstrap-datepicker(Andrew Rowls氏作)があったのでこちらを使ってみた。

#使用方法

$('#sandbox-container input').datepicker({
    format: "yyyy/mm/dd",
    todayBtn: "linked",
    language: "ja",
    keyboardNavigation: false,
    autoclose: true,
    todayHighlight: true
});

こんな感じでオプションを指定してやるといい感じになる。

#CSS

datepicker.cssなりdatepicker3.cssなりを読み込む。
lessも同梱されているのでカスタマイズもしやすい。

#言語

オプションのlanguageにjaを指定してやると日本語になる。
(locales/bootstrap-datepicker.ja.jsを一緒に読み込む必要がある)

#感想

オプションとして色々と痒いところに手が届くのはもちろん良いが、bootstrap-datepicker – Online Demoのトップ(サンドボックス)でオプションを迷わず生成できるのが良い。初心者や時間がない人向けには嬉しい。
きちんとドキュメントもまとめられている。分かりやすく書いてあるのできっと中学生レベルの英語力でも読める。

個人的に入力値の日付チェックをしてたけど、以下のオプションで解消できるのがかなり良かった。

forceParse

Boolean. Default: true

Whether or not to force parsing of the input value when the picker is closed. That is, when an invalid date is left in the input field by the user, the picker will forcibly parse that value, and set the input’s value to the new, valid date, conforming to the given format.

要するに、このオプションが有効だと(デフォルトは有効)、「ピッカーが閉じられたときに入力値の解析をして、無効な日付が入力されていると、強制的にその値を所定のフォーマットに準拠した、有効な日付を設定する」みたい。

twitterfacebookhatenafacebook