Bootstrapの魅力として、システマティックになっていることもあって、各種のプラグインが充実していることがあります。今回は、Bootstrap Datepickerを取り上げてみます。
導入
Railsであればgemにもなっているのですが、後述の理由によりソースを書き換えている部分があるので、手動でのインストールを行いました。とはいっても、GitHubからまとめてダウンロードしてきて、
- 本体のJavaScript
- 日本語訳のJavaScript
- デザイン用CSS
を適切な場所に置いてリンクさせるだけという簡単な設置作業で終わりました。なお、CSSはBootstrap2用と3用で分かれています。
機能
初期状態でdate-provide="datepicker"と書いておいたinput要素は自動でdatepickerが適用されますが、それ以外でも$(要素).datepicker();とすれば適用することができます。表示フォーマットや日付の書式、指定できる日付の範囲など、いろいろ指定が可能です。詳しくは公式ドキュメントをごらんください。
引っかかった点
位置が合わない
そのまま表示してみたところ、上に数十ピクセルずれて、しかも間の悪いことにちょうど上の欄を指すような位置に出てしまいました。Issueによればマージンが入る場合にうまく合わなくなるとのことで、とりあえずJavaScriptに少し手を入れて調整することにしました。
書式が変わらない
最初に$.fn.datepicker.defaults.format="yyyy-mm-dd";としたのですが、どうしても書式が2015/05/13のようになってしまって変わらない、ということが起こってしまいました。ソースを追いかけてみると、ロケールを指定した場合はロケールのデフォルトが優先される、という仕様だったのが原因でした。ということで、読み込み後にロケール側の$.fn.datepicker.dates.ja.format="yyyy-mm-dd";として一件落着しました（1時間弱戸惑いましたが）。