Detailed explanation of the use of daterangepicker control

This time I will bring you a detailed explanation of the use of the daterangepicker control. What are the precautions when using the daterangepicker control? The following is a practical case, let’s take a look. one time.

Dual calendar time period selection plug-in - daterangepicker is a time control in the later stage of bootstrap framework. It can set multiple time period options or customize the time period, and the user can choose it. The start time and end time, and the maximum span of the time period can be set in the program.

1. Quote

daterangepicker relies on monent.js and jquery. Therefore, monent.js, jquery, and bootstrap must be introduced before daterangepicker is introduced during use.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

Or when using Modular programming, such as when using seaj.js, add

in front of the entire code compression define("gallery/daterangepicker/1.3.7/daterangepicker",["jquery","moment","./daterangepicker-bs3.css"],
function(a){a("jquery");window .moment=a("moment"),a("./daterangepicker-bs3.css"),

(The source code of daterangepicker.js can be added in the middle) (I encountered it in the project at the moment, and it is usable; it is not clear yet and needs to be improved) 　　

Add

define("gallery/daterangepicker/1.3.7/daterangepicker-bs3.css",[],function(){
 seajs.importStyle(".daterangepicker{position:absolute;color:inherit;.........}"
 )})
 })

at the end 2. Use

During use, you need to pay attention to the parameter configuration of datetimepicker (this can be found on the official website). What I want to explain here is that you can download the source code on the official website and configure the parameters according to its demo to understand its various uses

Different parameters can be configured by selecting in the checkbox above. Here is a brief explanation of the parameters I used in the project and how to use them.

Due to the entire system of the project, there are double dates or single dates, or there are hours, minutes and seconds or no hours, minutes and seconds. Therefore, pairwise combinations are divided into four situations.

So I use the following:

/**
 * 日历
 * @param obj eles 日期输入框
 * @param boolean dobubble 是否为双日期（true）
 * @param boolean secondNot 有无时分秒（有则true）
 * @return none
 */
function calenders(eles,dobubble,secondNot){
 var singleNot,formatDate;
 if(dobubble ==true){
 singleNot = false;
 }else{
 singleNot = true;
 }
 if(secondNot ==true){
 formatDate = "YYYY-MM-DD HH:mm:ss";
 }else{
 formatDate = "YYYY-MM-DD";
 }
 
 $(eles).daterangepicker({
 "singleDatePicker": singleNot,//是否为单日期
 "timePicker": secondNot,//时间显示与否
 "timePicker24Hour": secondNot,//是否按24小时式来显示
 "timePickerSeconds": secondNot,//是否带秒
 "showDropdowns":true,//是否显示年月下拉选项，可以快速定位到哪一年哪一月
 "timePickerIncrement" :1,
 "linkedCalendars": false,//是否开始和结束连动，建议设为false，不然日期一直跳来跳去，首次使用者会觉得用户体检极度不佳
 "autoApply":true,//是否自动应用，不带时分秒的都可以实现在选择完日期后自动关闭，带时分秒时不会自动关闭
 "autoUpdateInput":false, //是否自动应用初始当前日期
 "locale": {
  "direction": "ltr",
  "format": formatDate,
  "separator": "~",
  "applyLabel": "Apply",
  "cancelLabel": "Cancel",
  "fromLabel": "From",
  "toLabel": "To",
  "customRangeLabel": "Custom",
  "daysOfWeek": [
  "Su",
  "Mo",
  "Tu",
  "We",
  "Th",
  "Fr",
  "Sa"
  ],
  "monthNames": [
  "一月",
   "二月",
   "三月",
   "四月",
   "五月",
   "六月",
   "七月",
   "八月",
   "九月",
   "十月",
   "十一月",
   "十二月"
  ],
  "firstDay": 1
 }
 }, function(start,end, label) {
 if(secondNot ==true&&dobubble ==true){
  $(eles).val($.trim(start.format('YYYY-MM-DD HH:mm:ss')+'~'+end.format('YYYY-MM-DD HH:mm:ss')));
 }else if(secondNot ==false&&dobubble ==true){
  $(eles).val($.trim(start.format('YYYY-MM-DD')+'~'+ end.format('YYYY-MM-DD')));
 }else if(secondNot ==false&&dobubble ==false){
  $(eles).val(start.format('YYYY-MM-DD'));
 }else if(secondNot ==true&&dobubble ==false){
  $(eles).val(start.format('YYYY-MM-DD HH:mm:ss'));
 }
 });
 //清空
 $(document).off('click','.clearBtns').on('click','.clearBtns',function(){
 $(eles).val('');
 })
}

Since daterangepicker does not have its own clearing function, and the project requirements sometimes require the date box to be empty, so I added a cross button behind the input box. As shown below, clearing is achieved

The code can be used as a reference (there are various ways to implement this)

<p class="input-group">
 <input type="text" name="extractionDate11" id="extractionDate11" class="form-control dateStart" placeholder="请选择起始时间" readonly size="30">
 <p class="input-group-addon clearBtns">x</p>
 </p>
 <span class="caret"></span>

And for quotes in various situations:

Single date without hours, minutes and seconds: calenders("#bgrq",false,false);

Single date with hours, minutes and seconds: calendars('#inputDate',false,true);

Double date without hours, minutes and seconds: calenders('#extractionDate11',true,false);

Double date with hours, minutes and seconds: calendars('#extractionDate11',true,true);

3. Problem Solving

1. Click on the drop-down date box, click on the blank space, the date box is closed, and the value is passed

Since the function of daterangepicker is: after clicking on the drop-down date box, click elsewhere on the page, the date box will be closed, and the previously selected date value will be automatically saved to the date box. This is what we are used to. It is equivalent to canceling, so make a modification in the source code:

Search the outsideClick method in the source code:

Replace this.hide() in it.

outsideClick: function(e) {
 var target = $(e.target);
 // if the page is clicked anywhere except within the daterangerpicker/button
 // itself then call this.hide()
 if (
 // ie modal dialog fix
 e.type == "focusin" ||
 target.closest(this.element).length ||
 target.closest(this.container).length ||
 target.closest('.calendar-table').length
 ) return;
 // this.hide();
 if (this.isShowing){
 $(document).off('.daterangepicker');
 $(window).off('.daterangepicker');
 this.container.hide();
 this.element.trigger('hide.daterangepicker', this);
 this.isShowing = false;
 }
 this.element.trigger('outsideClick.daterangepicker', this);
},

At the same time, the changes in the show method must be made, otherwise when the user selects dual dates, if he only selects one date and then clicks on the blank space, and the next time he clicks on the input box, an error will be reported and cannot be used anymore.

/*this.oldStartDate = this.startDate.clone();
this.oldEndDate = this.endDate.clone();
this.previousRightTime = this.endDate.clone();*/
this.oldStartDate = this.startDate;
this.oldEndDate = this.endDate;
this.previousRightTime = this.endDate;

2. The problem that the date is initially empty

Daterangepicker will automatically assign the current date to the bound input box at the beginning, that is, the parameter "autoUpdateInput":true/false, When it is true, the date will be automatically added. When false is selected, it will be initially empty. However, in some cases, it will not be automatically applied after selecting the date later. So we need to make some modifications (this is borrowed from this blog) Here we are a little clearer

（引用：在此我们可以使用autoUpdateInput属性，autoUpdateInput是用来打开和关闭daterangepicker选择时，是否自动传值到input[text] 这个DOM的属性，通过设置初始autoUpdateInput为false，可以实现初始值为空，这是在input中设置的placeholder才能正常显现出来。但是设置该属性之后，不管怎么选择daterangePikcer的日期，都不会有传值到input中，也就是没有办法正常显示选择的日期了，所以要在恰当的时刻，调用$(id).data('daterangepicker').autoUpdateInput=true,就可以了。作者最初设置为，最初默认值为空，当daterangepicker 的input发生点击时，autoUpadateInput=true，但是这时出现input不管是否选中日期，都会自动有值，所以为了修改这个问题，我在daterangepicker的源码中进行了修改，当然也可以重新更改需要的onclick事件。

在源码中，当autoUpdateInput设置为false之后，我们想要在点击确定，选中日期和点击range三个地方，将autoUpdateInput改变回来，所以，在三处设置this.autoUpdateInput=true属性）

1）在1210行左右的clickRange方法中：添加可以如下对照以下代码：

clickRange: function(e) {
 var label = e.target.getAttribute('data-range-key');
 this.chosenLabel = label;
 if (label == this.locale.customRangeLabel) {
 this.showCalendars();
 // } else {
 }else if (!this.endDate && date.isBefore(this.startDate)) {
 this.autoUpdateInput=true;
  //special case: clicking the same date for start/end,
  //but the time of the end date is before the start date
  this.setEndDate(this.startDate.clone());
 } else { // picking end
 this.autoUpdateInput=true;
 var dates = this.ranges[label];
 this.startDate = dates[0];
 this.endDate = dates[1];
 if (!this.timePicker) {
  this.startDate.startOf('day');
  this.endDate.endOf('day');
 }
 if (!this.alwaysShowCalendars)
  this.hideCalendars();
 this.clickApply();
 }
},

2）、在1340行左右，两处添加  this.autoUpdateInput=true; 请对照以下：

} else if (!this.endDate && date.isBefore(this.startDate)) {
 this.autoUpdateInput=true;
 //special case: clicking the same date for start/end,
 //but the time of the end date is before the start date
 this.setEndDate(this.startDate.clone());
} else { // picking end
 this.autoUpdateInput=true;
 if (this.timePicker) {
 var hour = parseInt(this.container.find('.right .hourselect').val(), 10);
 if (!this.timePicker24Hour) {
  var ampm = this.container.find('.right .ampmselect').val();
  if (ampm === 'PM' && hour < 12)
  hour += 12;
  if (ampm === 'AM' && hour === 12)
  hour = 0;
 }

3）、在1400行左右，给clickApply方法中添加  this.autoUpdateInput=true;

clickApply: function(e) {
 this.autoUpdateInput=true;
 this.hide();
 this.element.trigger('apply.daterangepicker', this);
 },相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue组件之间的传值方式

Angular4实现3d效果

The above is the detailed content of Detailed explanation of the use of daterangepicker control. For more information, please follow other related articles on the PHP Chinese website!