なんちゃってプログラマのぼやき

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利でした。



ダウンロード

下記よりダウンロード。
取得先によっては、日本語対応していないものもあるが、下記は日本語対応も含まれるため、まるごとダウンロードする。

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.ja.js」はlocalesフォルダ内に存在。


これらのファイルを、適当な場所に配置しておく。


記述方法

(1) head内で呼び出す
　上記５つを読み込む。
　「bootstrap-datepicker.js」を読み込んだうえで「bootstrap-datepicker.ja.js」を読み込むことに注意。

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


<input id="datepicker" type="text">

<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
// 以下オプション
// 日付フォーマット
format: 'yyyy/mm/dd',
//　日本語化
language: 'ja',
// 日付を選択したらクローズ
autoclose:'true'
});
});
</script>

オプション

オプションを書き足せば、datepickerを使いやすくカスタマイズできる。
すべてではないが、使えそうなオプションをいくつかメモ。

・選択できる日付の範囲を設定
minDate: '-1w',
maxDate: '+1m +10d'
・カレンダーに「今日」ボタンと「閉じる」ボタンを表示
showButtonPanel: true
・今日の日付をハイライト
todayHighlight : true
・曜日のテキストを変更
dayNamesMin:['S','M','T','W','T','F','S']


他にも、探せばたくさんありそうです。