⽇期时间范围选择插件：daterangepicker使⽤总结（必看
篇）
分享说明：
项⽬中要使⽤⽇期时间范围选择对数据进⾏筛选；精确到年⽉⽇时分秒；起初，使⽤了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">
jquery插件分享<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;
备注：
2 在IE8下；双⽇历的范围选择出现连个⽇历竖直排列问题；解决⽅法为给存放两个⽇历的盒⼦设置固定的宽度,⾜以放下两个⽇历的div；再把两个⽇历的div设置float:left即可;
4 希望本⽂能够帮助初识daterangepicker的朋友.
以上这篇⽇期时间范围选择插件:daterangepicker使⽤总结(必看篇)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论