引入：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 + timevar 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'}});//動態(tài)設(shè)置最小值 picker1.on('dp.change', function (e) {picker2.data('DateTimePicker').minDate(e.date);});//動態(tài)設(shè)置最大值 picker2.on('dp.change', function (e) {picker1.data('DateTimePicker').maxDate(e.date);}); } /**初始化 datetimepicker 時間 插件*/ function initTimepicker(defaultStartTime, defaultEndTime) {var now = new Date();// only timevar 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,});//動態(tài)設(shè)置最小值 picker1.on('dp.change', function (e) {picker2.data('DateTimePicker').minDate(e.date);});//動態(tài)設(shè)置最大值 picker2.on('dp.change', function (e) {picker1.data('DateTimePicker').maxDate(e.date);}); }

?

轉(zhuǎn)載于:https://www.cnblogs.com/kitty-blog/p/9583635.html

總結(jié)

以上是生活随笔為你收集整理的bootstrap-daterangepicker插件运用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。