Bootstrap3で「Datepicker for Bootstrap」を使う

この記事が良く読まれているみたいなので、がっつり修正しました。
何故かというと、以前の記事は再現性が低いためタイトルとマッチしていないからです。

なので、まっさらの状態からBootstrap3でbootstrap-datetimepickerを動かす方法をまとめました。
以前の記事は最後の方にあります。

環境

この記事は以下の環境で実践した結果をもとに作成されました。

ファイルversion
bootstrap-datepicker.js12/3/2013
bootstrap22.3.2
bootstrap33.0.2

htmlの書き換え

公式サイトに記載してあるサンプルhtmlは、Bootstrap2専用です。
このままではBootstrap3で動作させることは出来ませんので、htmlの書き換えが必要になります。

では、公式サイトに書いてあるサンプルを元に書き換えていきましょう。

  1. input-appendをinput-groupに変更
  2. span2を除去してcol-xs-4を一つ上のdivに追記
  3. inputタグにform-controlを付与
  4. ボタンとアイコンの記述を完全に作りかえる

これで入力フォームだけはOKです。

CSSの上書き

余計なCSSやJSが邪魔していなければ、htmlの書き換えだけで一応動きます。
ただ、これだと若干カレンダーの見栄えがおかしいので、一部CSSを再定義します。

これで完成です。実際のデモはこちら。

http://sd7lab.jp/demo/bootstrap3-datepicker/

上段のテキストボックスが以前のままの書き方で、下段のテキストボックスがBootstrap3用に書き換えた方です。

デモのソースコード

7行目のコメントアウトがbootstrap2.3.2のCSSを読み込んでいる部分です。
6行目がbootstrap3.0.2のCSSなので、ここをコメント化して、7行目のコメントを解除すると、上段のテキストボックスが動作します。

Datepickerの他のパターンをbootstrap3で動かす実験にも使えると思いますので、色々いじくってみてください。

ここから以前の記事

Bootstrap2からBootstrap3に切り替えるとbootstrap-datetimepickerが残念な事になってしまったので、まともに使えるように調整してみました。

こんな感じでhtmlソースを修正して、フォームの見た目はOK。
ところが、カレンダーがポップアップすると、テーブルがくずれてしまいます。

カレンダー

ChromeのデベロッパーツールでCSSを解析すると、ulタグに「-webkit-padding-start: 40px;」という表記があり、どうやらそいつが効いている模様。

user_agent_stylesheet

user agent stylesheetというのは、ブラウザがデフォルトで持っているスタイルを指しているようで、採用したくない場合は上書きする必要があります。

bootstrap-datepicker.jsが生成しているカレンダーのhtml部分にulが採用しているので、このulのpaddingを0にしてしまいましょう。

これで余白が消えて綺麗になりました。