Datetimepicker - opensource-workshop/connect-cms GitHub Wiki
- Tempus Dominus v6.x (https://getdatepicker.com/)
<div class="input-group" id="date{{$frame_id}}" data-target-input="nearest">
<input class="form-control datetimepicker-input" type="text" name="date" value="{{$date}}" data-target="#date{{$frame_id}}">
<div class="input-group-append" data-target="#date{{$frame_id}}" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa-regular fa-clock"></i></div>
</div>
</div>
{{-- DateTimePicker 呼び出し --}}
@include('plugins.common.datetimepicker', ['element_id' => "date{$frame_id}", 'format' => 'yyyy-MM-dd', 'clock_icon' => false]){{-- DateTimePicker 呼び出し --}}
@include('plugins.common.datetimepicker', ['element_id' => "date{$frame_id}", 'format' => 'HH:mm', 'view_mode' => 'clock', 'calendar_icon' => false]){{-- DateTimePicker 呼び出し --}}
@include('plugins.common.datetimepicker', ['element_id' => "date{$frame_id}", 'side_by_side' => true]){{-- DateTimePicker 呼び出し --}}
@include('plugins.common.datetimepicker', ['element_id' => "date{$frame_id}", 'side_by_side' => true, 'format' => 'yyyy-MM-dd HH:mm:ss', 'seconds' => true]){{-- DateTimePicker 呼び出し --}}
@include('plugins.common.datetimepicker', ['element_id' => "date{$frame_id}", 'format' => 'yyyyMM', 'clock_icon' => false, 'view_mode' => 'months', 'date' => false]){{-- DateTimePicker 呼び出し --}}
@include('plugins.common.datetimepicker', ['element_id' => "date{$frame_id}", 'format' => 'yyyy-MM-dd', 'clock_icon' => false])
<script type="text/javascript">
// datetimepicker内のjs変数 picker_date{{$frame_id}} を使用して、値が変更されたときに実行
picker_date{{$frame_id}}.subscribe('change.td', (event) => {
// 処理
});
</script>Tempus Dominus Bootstrap4 (<= Connect-CMS v1.26.1)
Tempus Dominus Bootstrap4 v5.39.0 (https://tempusdominus.github.io/bootstrap-4/)
<style>
/* datepickerの土日 */
.datepicker-days th.dow:first-child,
.datepicker-days td:first-child {
color: #c42626;
}
.datepicker-days th.dow:last-child,
.datepicker-days td:last-child {
color: #005dbf;
}
</style>
<script>
$(function () {
// カレンダーボタン押下
$('#date{{$frame_id}}').datetimepicker({
format: 'YYYY-MM-DD',
timepicker:false,
dayViewHeaderFormat: 'YYYY MMM',
});
});
</script>
<div class="input-group" id="date{{$frame_id}}" data-target-input="nearest">
<input class="form-control datetimepicker-input" type="text" name="date" value="{{$date}}" data-target="#date{{$frame_id}}">
<div class="input-group-append" data-target="#date{{$frame_id}}" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>