日期时间范围选择插件日期时间范围选择插件:daterangepicker使用总结使用总结(必看篇必看篇)
下面小编就为大家带来一篇日期时间范围选择插件: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">
<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">
评论0