插件-daterangepicker参数&使用总结

最新推荐文章于 2024-08-23 07:45:44 发布

若繁花逝尽

最新推荐文章于 2024-08-23 07:45:44 发布

阅读量9.4k

点赞数 1

分类专栏： web 插件文章标签： daterangepicker 插件

本文链接：https://blog.csdn.net/weixin_42979149/article/details/84786878

版权

web 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

插件

12 篇文章 0 订阅

订阅专栏

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
          });
      }
  }
},