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

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。

1.ダウンロード

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

https://github.com/eternicode/bootstrap-datepicker

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

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の教科書

作者:大藤幹
マイナビ

Amazon

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はちゃんと併用できるようになった。