1，依赖关系
使用之前需要引用bootstrap.css daterangpicker.css jquery.js boostrap.js moment.js daterangpicker.js
可以下载到本地，若是练习使用的话，可以使用cdn （http://www.bootcdn.cn/）
2，使用
官方网站 http://www.daterangepicker.com/
中文翻译文档 http://bsify.admui.com/daterangepicker/
（1）选项
|
选项 |
类型 |
描述 |
|
startDate |
Date 或string |
日期范围的初始日期，要与“locale”设置的格式一致 |
|
endDate |
Date 或string |
日期范围的结束日期 |
|
minDate |
Date 或string |
用户可能选择的最早日期 |
|
maxDate |
Date 或string |
用户可能选择的最晚日期 |
|
maxSpan |
Object |
|
|
showDropdowns |
true/false |
在下拉日历框中选择年月日 |
|
minYear |
Number（前提 showDropdowns为true） |
在下拉日历中的最小年 |
|
maxYear |
Number（前提 showDropdowns为true） |
在下拉日历中的最大年限 |
|
showWeekNumbers |
true/false |
使用本地计算第xx周 |
|
showISOWeekNumbers |
true/false |
使用ISO计算周数字 |
|
timePicker |
true/false |
添加时间选择框 |
|
timePickerIncrement |
number |
时间增长范围 |
|
timePicker24Hour |
true/false |
24小时制 |
|
timePickerSeconds |
true/false |
在timePicker中显示秒 |
|
ranges |
Object |
设置用户能选择的日期范围（例last7 days为 May 16,2018-May 22,2018） |
|
showCustomRangeLabel |
true/false（前提，ranges已使用） |
在末尾显示自定位范围 |
|
alwaysShowCalendars |
true/false |
|
|
opens |
（‘left’/’right’/’center’） |
日历出现在html元素下方的（左/右/中）的位置 |
|
drops |
（‘down’/’up’） |
日历出现在HTML元素的上/下（默认）位置 |
|
buttonClasses |
string |
被添加到apply或cancel按钮的css类名 |
|
applyButtonClasses |
string |
只能被添加到apply按钮的css类名 |
|
cancelButtonClasses |
string |
只能被添加到cancel按钮的css类名 |
|
locale |
object |
本地化的时间格式 |
|
singleDatePicker |
true/false |
只有一个日历 |
|
autoApply |
true/false |
隐藏apply和cancel按钮，只要选新的日期范围就立即apply |
|
linkedCalendars |
true/false |
当启用时，显示的两个日历将始终是两个连续月份（即一月和二月），并且当单击日历上方的左箭头或右箭头时，两个日历都将被提前。当禁用时，两个日历可以分别提前和显示任何月份/年。 |
|
isInvalidDate |
function |
判断已选的日期是否有效 |
|
isCustomDate |
function |
|
|
autoUpdateInput |
true/false |
当被选的日期改变时，是否要自动更新<input>内的值 |
|
parentEl |
string |
将要添加日期范围选择器的父元素的jQuery选择器，如果不提供，这将是“body”。 |
（2）方法
|
方法 |
描述 |
|
setStartDate（Date or string） |
将日期范围选择器当前选定的开始日期设置为所提供的日期 |
|
setEndDate(date or string) |
（3）事件
|
事件 |
描述 |
|
show.daterangepicker |
当picker显示时触发 |
|
hide.daterangepicker |
当picker关闭时触发 |
|
showCalendar.daterangepicker |
当日历显示时触发 |
|
hideCalendar.daterangepicker |
当日历隐藏时触发 |
|
apply.daterangepicker |
当apply按钮或预定义范围点击时，触发 |
|
cancel.daterangepicker |
当cancel按钮点击时，触发 |
3， 实践
参考 https://codepen.io/lunaliu/pen/QroJoV
| 图1 | 图2 |
4，遇到的问题
可通过https://momentjscom.readthedocs.io/en/latest/ 手册查询moment.js的相关知识
（1）图2中的年月下拉框的长度不一致，在chrome浏览器中还会出现位置不在同一高度，但是在360则没有该问题
原因：daterangepicker.css里面设置的宽度不一致，月份是56%，年是40%；
解决方法：引入新的css样式或在js里面通过querySelector（或是jquery的$().css() ）得到对应的css类，然后设置对应的值。
.daterangepicker select.monthselect, .daterangepicker select.yearselect { padding: 5px; width:40%; border:1px solid #eee; }
（2）会出现无效数值NaN，在chrome和360里面都有这个问题
问题出现位置：
singleDatePicker:true, opens:'right', showDropdowns:true, showWeekNumbers:true, minDate:'2000-01-01', maxDate:new Date(), locale:{ format:'YYYY-MM-DD', daysOfWeek:['日','一','二','三','四','五','六'], monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], firstDay:7 //问题就在这个地方。 }
解决方法：当把firstDay删掉（默认为0）或改成其他数字（0-6）即可。
原因：localeData.firstDayOfWeek(); // 0-6 (Sunday to Saturday) 没有7；
（3）设计要求日历初始值为空
参考： https://blog.csdn.net/qq_33518042/article/details/77175645
看了下daterangepicker的参数，可以通过设置autoUpdateInput="false"，但是input框内不会接收任何picker的值。根据上文的介绍，可以在daterangepicker.js文件里面设置该功能。
本文暂时没有评论，来添加一个吧(●'◡'●)