BootStrap的日历插件的使用

BootStrap的日期插件的使用:
加载Bootstrap-datetimepicker插件的js.


HTML中:


JS中:$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii'
});


类似案例:
HTML: 

                                                                    class="form-control" readonly="readonly"
                                    value="{{ array_get($search, 'date_from') }}" />
                               
                               
                           



JS:
requirejs(['../config'], function () {
    require(['jquery', 'bootstrap', 'datetimepicker-locale-zh-CN'], function ($) {
        var dateFromPicker = $('#date-from-picker'),
            dateFromInput = dateFromPicker.find('input'),
            dateToPicker = $('#date-to-picker'),
            dateToInput = dateToPicker.find('input');


        dateFromPicker.datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            minuteStep: 5,
            language: 'zh-CN',
            minView: 'month'
        });


        dateToPicker.datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            minuteStep: 5,
            language: 'zh-CN',
            minView: 'month'
        });


        dateFromPicker.on('changeDate', function (event) {
            var toDate = dateToInput.val(),
                date = event.date;
            if (date) {
                date.setUTCHours(0);
                date.setUTCMinutes(0);
                date.setUTCSeconds(0);
                date.setUTCMilliseconds(0);
            }


            dateToPicker.datetimepicker('setStartDate', event.date);
            if ($.trim(toDate) !== '' && event.date > new Date(toDate)) {
                dateToInput.val('');
                dateToPicker.datetimepicker('update');
            }
        });


        dateToPicker.on('changeDate', function (event) {
            var fromDate = dateFromInput.val(),
                date = event.date || new Date();


            if (date) {
                date.setUTCHours(0);
                date.setUTCMinutes(0);
                date.setUTCSeconds(0);
                date.setUTCMilliseconds(0);
            }


            dateFromPicker.datetimepicker('setEndDate', date);
            if ($.trim(fromDate) !== '' && date < new Date(fromDate)) {
                dateFromInput.val('');
                dateFromPicker.datetimepicker('update');
            }
        });
    });
});

你可能感兴趣的:(BootStrap的日历插件的使用)