Datetimepicker

lib

• Tempus Dominus v6.x (https://getdatepicker.com/)
  • Options - Tempus Dominus

Usage

yyyy-MM-dd

<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])

HH:mm

{{-- DateTimePicker 呼び出し --}}
@include('plugins.common.datetimepicker', ['element_id' => "date{$frame_id}", 'format' => 'HH:mm', 'view_mode' => 'clock', 'calendar_icon' => false])

yyyy-MM-dd HH:mm

{{-- DateTimePicker 呼び出し --}}
@include('plugins.common.datetimepicker', ['element_id' => "date{$frame_id}", 'side_by_side' => true])

yyyy-MM-dd HH:mm:ss

{{-- DateTimePicker 呼び出し --}}
@include('plugins.common.datetimepicker', ['element_id' => "date{$frame_id}", 'side_by_side' => true, 'format' => 'yyyy-MM-dd HH:mm:ss', 'seconds' => true])

yyyyMM

{{-- 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>

参考リンク

• [日付入力] 日付入力ライブラリを tempusdominus-bootstrap-4 → @eonasdan/tempus-dominus v6に切替 OW-2520 #2152

履歴

Tempus Dominus Bootstrap4 (<= Connect-CMS v1.26.1)

lib

Tempus Dominus Bootstrap4 v5.39.0 (https://tempusdominus.github.io/bootstrap-4/)

Usage

<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>

Screen