插件-daterangepicker參數&使用總結

api

api地址

options

• startDate（日期或字符串）最初選擇的日期範圍的開始日期。如果提供字符串，則必須與設置中locale設置的日期格式字符串匹配。
• endDate:(日期或字符串）最初選擇的日期範圍的結束日期。
• minDate:(日期或字符串）用戶可以選擇的最早日期。
• maxDate:(日期或字符串）用戶可以選擇的最新日期。
• maxSpan:( object）所選開始日期和結束日期之間的最大跨度。maxSpan在配置生成器中檢查一下如何使用它的示例。您可以提供moment庫允許您添加到日期的任何對象。
• showDropdowns:( true / false）顯示年份和月份選擇日曆上方的框以跳轉到特定的月份和年份。
• minYear:( number）showDropdowns設置爲true 時下拉列表中顯示的最小年份。
• maxYear:(數字）showDropdowns設置爲true 時下拉列表中顯示的最大年份。
• showWeekNumbers:( true / false）在日曆上顯示每週開始的本地化週數。
• showISOWeekNumbers:( true / false）在日曆的每週開始時顯示ISO週數。
• timePicker:( true / false）添加選擇框以選擇除日期之外的時間。
• timePickerIncrement:(數字）分鐘選擇列表的增量（即30，僅允許選擇以0或30結尾的時間）。
• timePicker24Hour:( true / false）使用24小時而不是12小時，刪除AM / PM選擇。
• timePickerSeconds:( true / false）在timePicker中顯示秒數。
• ranges:( object）設置用戶可以選擇的預定義日期範圍。每個鍵都是範圍的標籤，其值是一個數組，其中兩個日期表示範圍的邊界。單擊ranges配置生成器中的示例。
• showCustomRangeLabel:( true / false）ranges使用該選項時，在預定義範圍列表的末尾顯示“自定義範圍” 。只要當前日期範圍選擇與預定義範圍之一不匹配，此選項就會突出顯示。單擊它將顯示日曆以選擇新範圍。
• alwaysShowCalendars:( true / false）通常，如果使用該ranges選項指定預定義的日期範圍，則在用戶單擊“自定義範圍”之前，不會顯示用於選擇自定義日期範圍的日曆。如果將此選項設置爲true，則始終會顯示用於選擇自定義日期範圍的日曆。
• opens：（‘left’/‘right’/‘center’）選擇器是否顯示爲與左側，右側對齊，或者與其附加的HTML元素對齊。
• drops:(‘down’/‘up’）選擇器是出現在下面（默認）還是高於它所附加的HTML元素。
• buttonClasses：（string）將添加到apply和cancel按鈕的CSS類名。
• applyButtonClasses:(字符串）將僅添加到“應用”按鈕的CSS類名稱。
• cancelButtonClasses：（string）將僅添加到取消按鈕的CSS類名。
• locale:( object）允許您爲按鈕和標籤提供本地化字符串，自定義日期格式，以及更改日曆的第一天。locale在配置生成器中檢查以查看如何自定義這些選項。
• singleDatePicker:( true / false）僅顯示一個日曆以選擇一個日期，而不是具有兩個日曆的範圍選擇器。提供給回調的開始日期和結束日期將與選擇的單個日期相同。
• autoApply:( true / false）隱藏“應用”和“取消”按鈕，並在單擊兩個日期後自動應用新的日期範圍。
• linkedCalendars:( true / false）啓用後，顯示的兩個日曆將始終連續兩個月（即1月和2月），並且當單擊日曆上方的左箭頭或右箭頭時，兩個日曆都將提前。禁用時，兩個日曆可以單獨進行，並顯示任何月份/年份。
• isInvalidDate:( function）在顯示之前在兩個日曆中傳遞每個日期的函數，並且可以返回true或false以指示該日期是否可供選擇。
• isCustomDate:( function）在顯示之前在兩個日曆中傳遞每個日期的函數，並且可以返回CSS類名的字符串或數組以應用於該日期的日曆單元格。
• autoUpdateInput：（true / false）指示日期範圍選擇器是否應在初始化時以及所選日期更改時自動更新其附加元素的值。
• parentEl:(字符串）將添加日期範圍選擇器的父元素的jQuery選擇器，如果沒有提供，這將是’body’

方法

• setStartDate(Date or string)：將日期範圍選擇器的當前所選開始日期設置爲提供的日期
• setEndDate(Date or string)：將日期範圍選擇器的當前所選結束日期設置爲提供的日期

使用方式：

$('#id').data('daterangepicker').setStartDate(‘2018-12-11’);

事件

• show.daterangepicker：顯示選擇器時觸發
• hide.daterangepicker：隱藏選擇器時觸發
• showCalendar.daterangepicker：顯示日曆時觸發
• hideCalendar.daterangepicker：隱藏日曆時觸發
• apply.daterangepicker：單擊應用按鈕時，或單擊預定義範圍時觸發
• cancel.daterangepicker：單擊取消按鈕時觸發
  使用方式：

$('#id').on('apply.daterangepicker', function (ev, picker) {
	// code
	// console.log("start = "+picker.startDate.format('YYYY-MM-DD')+" end = "+picker.endDate.format('YYYY-MM-DD'));
});

解綁daterangepicker

$('#id').off('.daterangepicker');

minDate

minDate: "", // 將會以當天爲minDate

如果不需要minDate，則需要設置minDate: null，或者不設置
注意： startDate和endDate不能設置null，否則會報錯
後來發現傳null時typeof options.minDate === ‘object’，會執行下面的語句，導致左右切換箭頭不顯示，所以minDate如果沒有的話，改爲傳false

if (typeof options.minDate === 'object')
    this.minDate = moment(options.minDate);

回調裏調用當前元素-this.element

$('#date').daterangepicker({
	startDate: '2018-01-01',
	endDate: '2018-12-10',
	autoUpdateInput:false,
	applyClass : 'btn-sm btn-success',
	cancelClass : 'btn-sm btn-default',
	locale: {
	    applyLabel: '確認',
	    cancelLabel: '取消',
	    fromLabel : '起始時間',
	    toLabel : '結束時間',
	    customRangeLabel : '自定義',
	    firstDay : 1,
	    format: 'YYYY-MM-DD',
	},
	opens : 'right',    // 日期選擇框的彈出位置
	separator : ' 至 ',
	"showDropdowns": true
}, function(start, end, label) { // 格式化日期顯示框
	//獲取當前元素爲 this.element
})

默認日期點擊確定不會填充數據

初始化日期彈窗的時候傳入的回調函數，只會在用戶點擊了某個日期之後纔會觸發，假設用戶選中默認日期，將不會觸發

$('#date').daterangepicker({
	startDate: '2018-01-01',
	endDate: '2018-12-10',
	autoUpdateInput:false,
	applyClass : 'btn-sm btn-success',
	cancelClass : 'btn-sm btn-default',
	locale: {
	    applyLabel: '確認',
	    cancelLabel: '取消',
	    fromLabel : '起始時間',
	    toLabel : '結束時間',
	    customRangeLabel : '自定義',
	    firstDay : 1,
	    format: 'YYYY-MM-DD',
	},
	opens : 'right',    // 日期選擇框的彈出位置
	separator : ' 至 ',
	"showDropdowns": true
}, function(start, end, label) { // 格式化日期顯示框
	//不要在這裏給input框賦值，當用戶使用我們給出的默認開始時間時，該回調不觸發
})

解決方式：
監聽apply.daterangepicker事件

$('#date').on('apply.daterangepicker', function (ev, picker) {
	// 這裏填充數據
	console.log(picker.startDate.format('YYYY-MM-DD'));
});

回調中獲取當前元素

用this.element

$(obj).daterangepicker({
    autoUpdateInput:false,
     clearBtn:true,
     "singleDatePicker": true,
     "showDropdowns": true,
     locale : {
         format: 'YYYY-MM-DD',  
     }    
 },function(start, end, label) { 
     this.element.val(start.format('YYYY-MM-DD'))
     if (is_clear) {
         this.element.after('<span class="clear_time" onclick="clear_time01(this)"></span>')
         this.element.nextAll('.date_img').hide()
         this.element.nextAll('.clear_time').show()
     }
 });

雙日曆開始和結束選擇互不影響

參考簡書地址

雙日曆點擊空白處關閉，再點擊報錯

• 解決 ：
  show: function(e)方法裏 註釋掉
  // this.oldStartDate = this.startDate.clone();
  // this.oldEndDate = this.endDate.clone();
  改爲
  this.oldStartDate = this.startDate;
  this.oldEndDate = this.endDate;

日曆展開顯示不全

添加參數clip，當定位元件在某個方向上溢出窗口時，將元素翻轉到目標的另一側，再次運行碰撞檢測以查看它是否合適

 this.flip = false; // 當定位元件在某個方向上溢出窗口時，將元素翻轉到目標的另一側，再次運行碰撞檢測以查看它是否合適

if (typeof options.flip === 'boolean')
            this.flip = options.flip;

move: function裏

move: function() {
  var parentOffset = { top: 0, left: 0 },
      containerTop;
  var parentRightEdge = $(window).width();
  if (!this.parentEl.is('body')) {
      parentOffset = {
          top: this.parentEl.offset().top - this.parentEl.scrollTop(),
          left: this.parentEl.offset().left - this.parentEl.scrollLeft()
      };
      parentRightEdge = this.parentEl[0].clientWidth + this.parentEl.offset().left;
  }

  if (this.drops == 'up')
      containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top;
  else
      containerTop = this.element.offset().top + this.element.outerHeight() - parentOffset.top;
  this.container[this.drops == 'up' ? 'addClass' : 'removeClass']('dropup');
  
  /*************************** new add start ***********************/
  if (this.flip && this.parentEl.is('body')) {
      // 判斷元素是否與窗口邊緣發生碰撞，放不下
      var dropUpFlag = this.drops == 'up' ? true : false;
      if (this.drops == 'up') {
          if (containerTop < 0) {
              var tempTopDown = this.element.offset().top + this.element.outerHeight() - parentOffset.top;
              if (tempTopDown + this.container.outerHeight() < $('body').height()) {
                  containerTop = tempTopDown;
                  dropUpFlag = false;
              } else {
                  containerTop = 0;
              }
          }
      } else {
          if (containerTop + this.container.outerHeight() > $('body').height()) {
              var tempTopUp = this.element.offset().top - this.container.outerHeight() - parentOffset.top;
              if (tempTopUp >= 0) {
                  containerTop = tempTopUp;
                  dropUpFlag = true;
              } else {
                  containerTop = $('body').height() - this.container.outerHeight();
              }
          }
      }
      this.container[dropUpFlag ? 'addClass' : 'removeClass']('dropup');
  }
 /*************************** new add end***********************/
 
  var m_num= this.container.find('.single').length;
  var isEmpty_customPickers = $.isEmptyObject(this.customPickers);
  if(m_num==1){
      if (!isEmpty_customPickers) {
          this.container.css({
             width:440
          });
      } else {
          this.container.css({
             width:350
          });
      }
      
  }else{
      if (!isEmpty_customPickers) {
          this.container.css({
             width:800
          });
      } else {
          this.container.css({
             width:710
          });
      }
  }
  if (this.opens == 'left') {
      this.container.css({
          top: containerTop,
          right: parentRightEdge - this.element.offset().left - this.element.outerWidth(),
          left: 'auto'
      });
      if (this.container.offset().left < 0) {
          this.container.css({
              right: 'auto',
              left: 9
          });
      }
  } else if (this.opens == 'center') {
      this.container.css({
          top: containerTop,
          left: this.element.offset().left - parentOffset.left + this.element.outerWidth() / 2
                  - this.container.outerWidth() / 2,
          right: 'auto'
      });
      if (this.container.offset().left < 0) {
          this.container.css({
              right: 'auto',
              left: 9
          });
      }
  } else {
      this.container.css({
          top: containerTop,
         
          left: this.element.offset().left - parentOffset.left,

          right: 'auto'
      });
      if (this.container.offset().left + this.container.outerWidth() > $(window).width()) {
          this.container.css({
              left: 'auto',
              right: 0
          });
      }
  }
},