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>