以前、JQueryのDatePickerに時間をつけたいでtimepickerについて書きましたが、今回はBootstrapのdatetimepickerを使ってみたのでメモ。
必用なJSファイルたち
- jquery.js
- bootstrap.js
- moment.js
- transition.js
- collapse.js
- bootstrap-datetimepicker.js
- locale/ja.js
公式サイト：http://eonasdan.github.io/bootstrap-datetimepicker/Installing/#manual
まずは、composer.jsonを用意します。
|
1 2 3 4 5 6 7 |
{ "require": { "twbs/bootstrap": "^3.3", "moment/moment": "^2.13", "Eonasdan/bootstrap-datetimepicker": "^4.17" } } |
composerで必用なファイルを取得します。
|
1 2 3 4 5 6 7 8 9 10 |
$ composer sel-update You are already using composer version 1.1.2 (stable channel). $ composer update Loading composer repositories with package information Updating dependencies (including require-dev) ... ... ... Compiling component files |
取得に成功したら下記のファイルをそれぜれ読み込ませます。
components/jquery/jquery.js
components/bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js
components/moment/moment.js
components/moment/locale/ja.js
vendor/twbs/bootstrap/dist/bootstrap.js
vendor/twbs/bootstrap/js/collapse.js
vendor/twbs/bootstrap/js/transition.js
準備完了です。
続いて使い方ですが、公式サイトにほぼ使い方は書いてあります。
一般的な使い方はこちらだと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script> </div> </div> |
自分が気に入っているのはこちらの使い方でinlineにカレンダーが表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div style="overflow:hidden;"> <div class="form-group"> <div class="row"> <div class="col-md-8"> <div id="datetimepicker12"></div> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker12').datetimepicker({ inline: true, sideBySide: true }); }); </script> </div> |
で、これをさらにカスタマイズして、inlineカレンダーを選択したらテキストエリアにフォーマット後の日付を設定する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div style="overflow:hidden;"> <div class="form-group"> <div class="row"> <div class="col-md-4"> <input type="text" id="input-date"> </div> <div class="col-md-8"> <div id="datetimepicker12"></div> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker12').datetimepicker({ format: "YYYY/MM/DD hh:mm", locale: 'ja', inline: true, sideBySide: true }); $("#datetimepicker12").on("dp.change", function (e) { $("#input-date").val(e.date.format('YYYY/MM/DD HH:mm')); }); }); </script> </div> |
参考サイト
http://eonasdan.github.io/bootstrap-datetimepicker/
http://qiita.com/kyota/items/806da61fb8fffa34b695
One comment to this article
Pingback:
bootstrap datetimepickerを使ってみた その２ | プログラマのめもぶろぐ