bootstrap-daterangepicker插件运用
引入: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); }); }
作者:胡倩倩0903
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
分类:
bootstrap
posted on 2018-09-04 12:03 kitty20180903suzhou 阅读(331) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY