时间:2021-05-18
分享说明:
项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layui的问题;因为自己写的demo可以在IE8运行;只是在我的项目环境下某些代码冲突了;所以换用了bootstrap插件daterangepicker;看了很多资料;结合官网了文档;基本算是搞定了;把我的总结代码分享给大家;希望对使用daterangepicker插件的初学者有帮助。
总结分为四个部分:日期范围选择实现,日期时间选择,使用两个单日历实现范围选择,使用div代替input实现日期时间选择;下面是代码
css 代码
<style type="text/css"> body, ul, p, h3, img, input { margin: 0; padding: 0; } .box { display: block; text-align: center; margin: 20px auto; } input { width: 400px; height: 40px; } label { display: inline-block; width: 90px; line-height: 40px; height: 40px; margin: 0; font-weight: normal; font-family: "宋体"; background-color: #ddd; } .divDateSelect{ width: 185px; height: 50px; line-height: 50px; margin:10px auto; border:2px solid #ddd; border-radius: 5px; } </style>html代码:
<!-- 日期时间范围选择代码 --> <div class="box"> <label for="datePicker">双日历</label> <input type="text" name="datePicker" class="datePicker" id="datePicker"> </div> <!-- 日期时间选择代码 --> <div class="box"> <label for="singledatePicker">单日历</label> <input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker"> </div> <!-- 两个单日历实现日期时间范围选择代码 --> <div class="box"> <label for="from">从</label> <input type="text" name="from" class="from" id="from"> <label for="to">到</label> <input type="text" name="to" class="to" id="to"> </div> <!-- 不使用input,用div实现代码 --> <div class="divDateSelect" id="divDateSelect"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </div>js 代码,按照上下顺序对应html四部分
$('input[name="datePicker"]').daterangepicker({ timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束器日期 maxDate: moment(new Date()), //设置最大日期 "opens": "center", ranges: { // '今天': [moment(), moment()], '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], '上周': [moment().subtract(6, 'days'), moment()], '前30天': [moment().subtract(29, 'days'), moment()], '本月': [moment().startOf('month'), moment().endOf('month')], '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] }, showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 customRangeLabel: '自定义', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, function(start, end, label) { timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')]; console.log(timeRangeChange); });$('input[name="singledatePicker"]').daterangepicker({ "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true, //单日历 showDropdowns: true, //年月份下拉框 timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 maxDate: moment(new Date()), //设置最大日期 "opens": "center", showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, function(start) { console.log(start.format('YYYY-MM-DD HH:mm:ss')); });var minDate = null; var max = null; function fromDate(maxDate) { if(!maxDate){ max = moment(new Date()) }else{ max = maxDate; } $('input[name="from"]').daterangepicker({ "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true, //单日历 showDropdowns: true, //年月份下拉框 timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 maxDate: max , //设置最大日期 "opens": "center", showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, function(s) { toDate(s); }); } fromDate() function toDate(minDate) { $('input[name="to"]').daterangepicker({ "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true, //单日历 showDropdowns: true, //年月份下拉框 timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 maxDate: moment(new Date()), //设置最大日期 minDate: minDate, "opens": "center", showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, function(s) { fromDate(s) }); } toDate();var start = moment(new Date()); function cb(start) { $('#divDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss')); } $('#divDateSelect').daterangepicker({ "autoApply": true, //选择日期后自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true, //单日历 showDropdowns: true, //年月份下拉框 // timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 maxDate: moment(new Date()), //设置最大日期 "opens": "center", showWeekNumbers: true, locale: { format: "YYYY-MM-DD HH:mm:ss", //设置显示格式 applyLabel: '确定', //确定按钮文本 cancelLabel: '取消', //取消按钮文本 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay: 1 }, }, cb); cb(start);效果图:
第一部分:
第二部分:
第三部分就是两个第二部分组实现第一部分的效果;原理为在确定好开始日期后;设置选择结束日期日历的最小选择日期;在结束日期选中后;设置开始日期的最大选择日期;
第四部分:
关键选项的含义已经在代码中注释了;引入文件css包括bootstrap的css文件;daterangepicker的css文件;js包括jquery的js;bootstrap的js;daterangepicker的js以及moment.js;
备注:
1 moment.js使用了数组的indexOf()方法;但IE8不支持;需要引入兼容代码;代码地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf 在polyfill下;
2 在IE8下;双日历的范围选择出现连个日历竖直排列问题;解决方法为给存放两个日历的盒子设置固定的宽度,足以放下两个日历的div;再把两个日历的div设置float:left即可;
3 官网地址;选项设置: http:///#examples
4 希望本文能够帮助初识daterangepicker的朋友.
以上这篇日期时间范围选择插件:daterangepicker使用总结(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jQueryDateRangePicker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的
今天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得:插件开源地址:daterangepicker日期控件,插件使用只要按照开源中的
基于vuejs+webpack环境使用的日期选择插件,希望大家喜欢。支持单选和多选日期支持限定开始和结束日期范围选择。支持小时分钟需要引入fontawesome
双日历时间段选择插件—daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时
jQueryUI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮