分享说明：
项目中要使用日期时间范围选择对数据进行筛选；精确到年月日 时分秒；起初,使用了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, //显示时间
