Bootstrap Datepickerと Bootstrap Timepicker がひとつのライブラリで使えるようになったBootstrap 3 Datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/
ドキュメントを読んでもTimepicker的な使い方が載っていなかったので、時間のみを使用する場合をまとめました。
momentjsではまった箇所
Bootstrap 3 Datepickerは時間操作をmomentjsを使ってやっています。
http://momentjs.com/
momentjs自体はドキュメントを読めばそれほど難しくないのと、他にも説明をしているサイトがあるので、使い方はそちらに任せて、使用するにあたりはまった点が1点あるのでそこだけ注意。
ダウンロードできるファイルに、ロケールファイルが内包されている、moment-with-locales.jsとされていないmoment.min.jsがあって、されていないものは必要なロケールだけを選んで使えるような感じになっているのですが、正しい配置をしていてもなぜかロケール設定をするとうまく動かなかったので、locale: 'ja'を設定する場合は必ずmoment-with-locales.jsを利用しましょう。
時間入力用のHTML
今回はデータベースから取ってきた日付データの時間のみを操作するため、フォームの初期値には日付がついた状態のデータをセットします。
<div class="input-group time">
<input name="time" class="form-control" type="text" value="2016-09-12 11:30:00">
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
Datepickerの初期化
時間のみを扱う場合、formatに時間だけを指定すると日付選択が無く時間の選択のみのドロップダウンメニューが表示されます。
$('.time').datetimepicker({
format: 'HH:mm',
extraFormats: ['YYYY-MM-DD HH:mm:ss'],
stepping: 5,
defaultDate: moment('2016-09-12 11:00:00', 'YYYY-MM-DD HH:mm:ss'),
minDate: moment('2016-09-12 11:00:00', 'YYYY-MM-DD HH:mm:ss'),
maxDate: moment('2016-09-13 01:00:00', 'YYYY-MM-DD HH:mm:ss'),
keepInvalid: true
});
オプションの説明
単に時間のみを扱う場合はformatを時間のみにするだけで特に問題なく使用が可能です。
ただし、今回は使用する時間のレンジが日付をまたぐ必要があったため、日付つきのデータを扱う必要がありました。
単にformatを時間のみにすると日をまたいだレンジが使用できません。
そのためminDateとmaxDateに日付をつけてあげる必要があります。
そのとき指定するデータにも日付がないとうまく日またぎの処理をしてくれないので、extraFormatsで受け渡されるデータのフォーマットを指定してあげます。
extraFormatsは入力のフォーマットのパターンを設定できるオプションで、入力フォーマットを配列で指定することができます。
これを指定することで、フォーム上のデータとドロップダウンメニューで出てくるフォーマットを変更することが可能になります。
またminDateやmaxDateを指定すると、初期値が勝手に変わってしまうことがあるため、keepInvalidをtureにすることで、初期値が勝手に変わるのを防ぐことができます。
サーバ側へのデータの引渡し
最後にDatepickerで作られた日付データをサーバ側へ渡す処理を説明します。
通常のsubmitだとフォームに表示されている時間データのみがサーバへ送られます。
今回は日またぎの処理があるため、データはあくまでも日付のデータが一緒でないと処理が面倒になるので、せっかく日付データをもってるDatepickerのデータをサーバに渡してあげる必要があります。
$('#form').on('submit', function() {
$('stime').each(function() {
$(this).find('input').val($(this).data("DateTimePicker").date().format('YYYY-MM-DD HH:mm:ss'));
});
});
フォームがsubmitする前にDatepickerのデータを取り出し、inputのvalueに入れてあげることで、日付つきのデータをサーバに送ることができます。