daterangepicker 清空_日期时间范围选择插件:daterangepicker使用总结

---恢复内容开始---

分享说明:

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

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

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;

}

html代码:

1

2

3 双日历

4

5