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

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

分享说明：

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

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

css 代码

html代码:

双日历

单日历

从

到

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

$('input[name="datePicker"]').daterangepicker({

timePicker: true, //显http://示时间

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://daterangepicker.com/#options

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。