bootstrap-datepicker使い方まとめ

DatePickerコンポーネントは、Bootstrapの標準のJavascriptコンポーネントに含まれていませんので、DatePickerを使いたい場合はbootstrap-datepickerを追加する必要があります。
bootstrap-datepicker

bootstrap-datepickerはオリジナルのものと機能強化されたものがあるようですが、私は後者を使っています。

オリジナル: Datepicker for Bootstrap, from Twitter
上記の機能強化版:
Webサイト: bootstrap-datepicker — bootstrap-datepicker documentation
Github: https://github.com/eternicode/bootstrap-datepicker


使い方

CSSとJavascriptを追加
[html]
<link href="path/to/datepicker.css" rel="stylesheet" type="text/css">
<script src="path/to/bootstrap-datepicker.js">
[/html]

datepickerを有効にする。
[javascript]
$(‘.datepicker’).datepicker()
[/javascript]
よく使う場合はフレームワークのレイアウトで常に呼ぶようにしてしまいます。

datepickerを追加したいテキストボックスにdatepickerクラスを追加
[html]
<input type="text" class="form-control datepicker"/>
[/html]

フォーマットの指定
[javascript]
$(‘.datepicker’).datepicker({
format: ‘dd-M-yy’
})
[/javascript]

日本語化
locales/bootstrap-datepicker.ja.jsを追加
[html]
<script src="path/to/bootstrap-datepicker.ja.js">
[/html]
languageを指定
[javascript]
$(‘.datepicker’).datepicker({
language: ‘ja’
})
[/javascript]

参考:
jQuery | 日付入力に便利な「Datepicker for Bootstrap」