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を追加

<link href="path/to/datepicker.css" rel="stylesheet"; type="text/css">
<script src="path/to/bootstrap-datepicker.js">

datepickerを有効にする。

$('.datepicker').datepicker()

よく使う場合はフレームワークのレイアウトで常に呼ぶようにしてしまいます。

datepickerを追加したいテキストボックスにdatepickerクラスを追加

<input type="text" class="form-control datepicker"/>

フォーマットの指定

  $('.datepicker').datepicker({
    format: 'dd-M-yy'
  })

日本語化
locales/bootstrap-datepicker.ja.jsを追加

<script src="path/to/bootstrap-datepicker.ja.js">

languageを指定

  $('.datepicker').datepicker({
    language: 'ja'
  })

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

, ,