前回に引き続き、bootstrap datetimepickerについてメモ。
１．年月日のカレンダーのみを表示したいときの設定。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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({ format: "YYYY-MM-DD", locale: 'ja', useCurrent: false }); }); </script> </div> </div> |
どうやら、formatに設定されている文字によって、どのカレンダーを表示するか決定しているようでした。
２．ヘッダーの年月のフォーマットを変えたいときの設定。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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({ dayViewHeaderFormat: 'YYYY MMMM', locale: 'ja', useCurrent: false }); }); </script> </div> </div> |
３．営業時間外は設定させたくないときの設定。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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({ format: "YYYY-MM-DD HH:㎜", locale: 'ja', //useCurrent: false. これをfalseに設定しておくとデフォルトが0時となるので有効範囲外になってしまう。 disabledHours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 19, 20, 21, 22, 23] }); }); </script> </div> </div> |
４．Todayボタンを表示したときの設定。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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({ format: "YYYY-MM-DD HH:㎜", locale: 'ja', //sideBySide: true, これを有効にしていると表示されない showTodayButton: true }); }); </script> </div> </div> |