bootstrap-daterangepicker

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文件里面设置该功能。