引入:daterangepicker.css、daterangepicker.js、moment.js、moment.min.js
链接:https://files.cnblogs.com/files/kitty-blog/moment.min.js、https://files.cnblogs.com/files/kitty-blog/moment.js、https://files.cnblogs.com/files/kitty-blog/daterangepicker.js、https://files.cnblogs.com/files/kitty-blog/daterangepicker.css
/**初始化 Daterangepicker 插件 */ function initDaterangepicker() { $('.daterangepicker').daterangepicker({ "showDropdowns": true, "showWeekNumbers": false, "showISOWeekNumbers": false, "timePicker": true, "timePicker24Hour": true, "timePickerSeconds": false, "autoApply": false, "locale": { "direction": "ltr", "format": "YYYY-MM-DD HH:mm", "separator": " 至 ", "applyLabel": "确定", "cancelLabel": "取消", "fromLabel": "From", "toLabel": "To", "daysOfWeek": [ "周六", "周一", "周二", "周三", "周四", "周五", "周日" ], "monthNames": [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ], "firstDay": 1 }, "alwaysShowCalendars": false, "parentEl": "daterangepicker", "startDate": moment(), "endDate": moment(), "minDate": false, "maxDate": "05/28/2050", "applyClass": "btn-green btn-outline", "cancelClass": "btn-default btn-outline", "opens": "center", "drops": "down" }, function (start, end, label) { console.log("New date range selected: " + start.format('YYYY-MM-DD HH:mm') + " to " + end.format('YYYY-MM-DD HH:mm') + " (predefined range: " + label + ")"); $("#startTime").val(start.format('YYYY-MM-DD HH:mm')); $("#endTime").val(end.format('YYYY-MM-DD HH:mm')); }); } /**初始化 datetimepicker 日期 插件*/ function initDatepicker(defaultStartDate, defaultEndDate) { var now = new Date(); //date + time var picker1 = $('.datetimepicker-startdate').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn'), defaultDate: defaultStartDate, minDate: false, maxDate: false, ignoreReadonly: true, allowInputToggle: true, icons: { time: 'fa fa-clock-o', date: 'fa fa-calendar', up: 'fa fa-chevron-up', down: 'fa fa-chevron-down', previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-crosshairs', clear: 'fa fa-trash' } }); var picker2 = $('.datetimepicker-enddate').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn'), defaultDate: defaultEndDate, minDate: defaultStartDate, maxDate: false, ignoreReadonly: true, allowInputToggle: true, icons: { time: 'fa fa-clock-o', date: 'fa fa-calendar', up: 'fa fa-chevron-up', down: 'fa fa-chevron-down', previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-crosshairs', clear: 'fa fa-trash' } }); //动态设置最小值 picker1.on('dp.change', function (e) { picker2.data('DateTimePicker').minDate(e.date); }); //动态设置最大值 picker2.on('dp.change', function (e) { picker1.data('DateTimePicker').maxDate(e.date); }); } /**初始化 datetimepicker 时间 插件*/ function initTimepicker(defaultStartTime, defaultEndTime) { var now = new Date(); // only time var picker1 = $('.datetimepicker-starttime').datetimepicker({ format: 'LT', locale: moment.locale('zh-cn'), defaultDate: defaultStartTime == "" ? 5 : defaultStartTime, minDate: false, maxDate: false, ignoreReadonly: true, allowInputToggle: true, }); var picker2 = $('.datetimepicker-endtime').datetimepicker({ format: 'LT', locale: moment.locale('zh-cn'), defaultDate: defaultEndTime == "" ? 21 : defaultEndTime, minDate: defaultStartTime, maxDate: false, ignoreReadonly: true, allowInputToggle: true, }); //动态设置最小值 picker1.on('dp.change', function (e) { picker2.data('DateTimePicker').minDate(e.date); }); //动态设置最大值 picker2.on('dp.change', function (e) { picker1.data('DateTimePicker').maxDate(e.date); }); }