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）設計要求日曆初始值爲空

參考： http://www.javashuo.com/article/p-wcqyvdit-mk.html

看了下daterangepicker的參數，能夠經過設置autoUpdateInput="false"，可是input框內不會接收任何picker的值。根據上文的介紹，能夠在daterangepicker.js文件裏面設置該功能。