日期时间范围选择插件:daterangepicker使用总结(必看篇)

分享说明：

项目中要使用日期时间范围选择对数据进行筛选；精确到年月日时分秒；起初,使用了layui的时间日期选择插件；但是在IIE8第一次点击会报设置格式错误；研究了很久没解决，但能确定不是layui的问题；因为自己写的demo可以在IE8运行；只是在我的项目环境下某些代码冲突了；所以换用了bootstrap插件daterangepicker；看了很多资料;结合官网了文档；基本算是搞定了；把我的总结代码分享给大家；希望对使用daterangepicker插件的初学者有帮助。

总结分为四个部分：日期范围选择实现，日期时间选择，使用两个单日历实现范围选择，使用div代替input实现日期时间选择；下面是代码

css 代码

.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;
}

HTML代码:

Box">

js 代码，按照上下顺序对应html四部分

显示时间 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,'前30天': [moment().subtract(29,'本月': [moment().startOf('month'),moment().endOf('month')],'上月': [moment().subtract(1,'month').startOf('month'),'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); });

自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true,//单日历 showDropdowns: true,//年月份下拉框 timePicker: true,//设置开始日期 maxDate: moment(new Date()),//取消按钮文本 daysOfWeek: ['日',function(start) { console.log(start.format('YYYY-MM-DD HH:mm:ss')); });

自动提交;只有在不显示时间的时候起作用timePicker:false singleDatePicker: true,//单日历 showDropdowns: true,//年月份下拉框 timePicker: true,//显示时间 timePicker24Hour: true,//时间制 timePickerSeconds: true,//时间显示到秒 // startDate: moment().hours(0).minutes(0).seconds(0),//设置开始日期 maxDate: max,//设置最大日期 "opens": "center",locale: { format: "YYYY-MM-DD HH:mm:ss",//设置显示格式 applyLabel: '确定',//确定按钮文本 cancelLabel: '取消',//取消按钮文本 daysOfWeek: ['日','十二月' ],firstDay: 1 },function(s) { toDate(s); }); } fromDate() function toDate(minDate) { $('input[name="to"]').daterangepicker({ "autoApply": true,//设置开始日期 maxDate: moment(new Date()),//设置最大日期 minDate: minDate,"opens": "center",function(s) { fromDate(s) }); } toDate();

效果图:

第一部分:

第二部分:

第三部分
就是两个第二部分组实现第一部分的效果;原理为在确定好开始日期后;设置选择结束日期日历的最小选择日期;在结束日期选中后;设置开始日期的最大选择日期;

第四部分:

关键选项的含义已经在代码中注释了;引入文件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://www.daterangepicker.com/#options　　

例子: http://www.daterangepicker.com/#examples

4 希望本文能够帮助初识daterangepicker的朋友.

以上这篇日期时间范围选择插件:daterangepicker使用总结(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/36424.html

daterangepicker插件

上一篇：详解React Native顶|底部导航使用小下一篇：用JS编写一个函数,返回数组中重复出

日期时间范围选择插件:daterangepicker使用总结(必看篇)

分享说明：

css 代码

HTML代码:

js 代码，按照上下顺序对应html四部分

效果图:

第一部分:

第二部分:

第三部分

第四部分:

备注：

猜你在找的JavaScript相关文章