Datetimepicker

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