BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか

1.ダウンロード

現在はちゃんと日本語対応版も出ているようで、日本語対応版を含んだ状態で入手したいため、下記よりzip形式でまるごとダウンロード。ダウンロード元によっては日本語未対応のところなどある模様。

GitHub - uxsolutions/bootstrap-datepicker: A datepicker for twitter bootstrap (@twbs)

A datepicker for twitter bootstrap (@twbs). Contribute to uxsolutions/bootstrap-datepicker development by creating an ac...

github.com

最終的に必要なのは以下の５つなのでこれらが揃うように。

• jquery-1.8.3.js
• bootstrap.min.css
• datepicker.css
• bootstrap-datepicker.js
• bootstrap-datepicker.ja.js

日本語化したい場合は本体である「bootstrap-datepicker.js」を読み込んだうえで「bootstrap-datepicker.ja.js」を読み込むことに注意。日本語化の「bootstrap-datepicker.ja.js」はlocalesフォルダ内にある。

よくわかるHTML5+CSS3の教科書

• 作者: 大藤幹
• 出版社/メーカー: マイナビ
• 発売日: 2012/07/28
• メディア: 単行本（ソフトカバー）
• 購入: 4人 クリック: 28回
• この商品を含むブログ (5件) を見る

2.適当な場所に配置する

3.記述方法

(1) head内で呼び出す
　上記５つを読み込む。

(2) body内で以下のように記述

<input id="datepicker" type="text">
<script type="text/javascript">
$(function() {
    $('#datepicker').datepicker({
        format: 'yyyy/mm/dd',
        language: 'ja',
        autoclose:'true'
    });
});
</script>

FireFox環境では下図のように正常に動作して申し分なかった。

ただしIEで使用すると下図のようになる。

cssがうまく適用されていない模様。bootstrap本体でもradiusやshadowなどをieで適用できるようにするには、「PIE.htc」による補助が必要という問題があるが、bootstrap-datepickerにも同様でそのまま使えそうにはない。

少々の見た目の悪さは我慢するとしても、hover時のbackbroundカラーがdatepicker.cssで指定されている通り#eeeeeeに変わらないことや、同じくhover時のcursor:pointer（指マーク）に変化しないのは、ユーザの誤操作に影響しそうだ。

社内本番環境はIEであるため、bootstrap-datepickerの採用は断念することにした。（素早く原因追究ができるほどはcssに詳しくはないため）

ちなみに

ちなみに前エントリーで書いた「bootstrapと併用したときにjQueryUI datepickerのcssが崩れてしまう？」という不具合は、併用したために不具合を起こしているわけではないことがわかった。
なぜか本番環境に配置したjquery-ui-1.10.3.custom.cssだけが読み込めないようになっていた。パスの記述間違いなどではなく、原因は不明だが、jquery-ui-1.10.3.custom.cssの置き場所を変えて読み込むことでbootstrapとjQueryUIのdatepickerはちゃんと併用できるようになった。