Datetimepicker

Connect-cms lib path

https://github.com/opensource-workshop/connect-cms/blob/master/public/js/tempusdominus-bootstrap-4/tempusdominus-bootstrap-4.min.js

lib

Tempus Dominus Bootstrap4 v5.1.2 (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',
        });
        /* datetimepickerの日付変わったらsubmit */
        $("#date-{{$frame_id}}").on("change.datetimepicker", function (e) {
            datetimepicker.submit();
        });
    });
</script>

<form name="datetimepicker" method="get" action="{{url('/')}}/plugin/xxxxx/yyyy/{{$page->id}}/{{$frame_id}}">
    <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>
</form>

Screen