Bootstrap DatetimePicker

インストール

php artisan ui bootstrap
npm install tempusdominus-bootstrap-4

設定

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css” />
<script defer src=”https://use.fontawesome.com/releases/v5.7.2/js/all.js” integrity=”sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP” crossorigin=”anonymous”></script>

<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js”></script>

html

<div class=”input-group date” id=”datepicker” data-target-input=”nearest”>
 <input type=”text” class=”form-control datetimepicker-input” data-target=”#datepicker” id=”datepickervalue” />
 カレンダーマーク
 <div class=”input-group-append” data-target=”#datepicker” data-toggle=”datetimepicker”>
  <div class=”input-group-text”><i class=”fa fa-calendar”></i></div>
 </div>
</div>

<div class=”input-group date” id=”timepicker” data-target-input=”nearest”>
 <input type=”text” class=”form-control datetimepicker-input” data-target=”#timepicker” id=”datepickervalue” />
 時計マーク
 <div class=”input-group-append” data-target=”#timepicker” data-toggle=”datetimepicker”>
  <div class=”input-group-text”><svg class=”svg-inline--fa fa-clock fa-w-16″ aria-hidden=”true” focusable=”false” data-prefix=”far” data-icon=”clock” role=”img” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 512 512″ data-fa-i2svg=””><path fill=”currentColor” d=”M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z”></path></svg><!-- <i class=”far fa-clock”></i> --></div>
 </div>
</div>

JavaScript

<script>
 $(function () {
  $(‘#datepicker’).datetimepicker({
   locale: ‘ja’,
   dayViewHeaderFormat: ‘YYYY/MM’,
   format: ‘YYYY/MM/DD’,
   日曜を選択不可に
   daysOfWeekDisabled: [0],
   tooltips: {
    ~
   },
   日時のテキストボックスをreadonlyにする場合に使用
   ignoreReadonly: true,
   日付と時刻の選択画面を同時表示
   sideBySide: true,
   選択可能な日付 ※この場合は過去日付は選択できない
   minDate: new Date(),
   選択可能な日付
   maxDate: new Date(〜),
   初期値
   defaultDate: “2020/12/31 13:30:30”
  });

  $(‘#timepicker’).datetimepicker({
   locale: ‘ja’,
   tooltips: {
    ~
   },
   format: ‘HH:mm’,
   locale: ‘ja’,
   buttons: {
     showClose: true
   },
   選択を30分刻みに
   stepping: 30,
   選択可能時刻
   enabledHours: [ 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
   ignoreReadonly: true,
   defaultDate: “2020/12/31 13:30:30”
  });
 });
</script>