How to Use the bootstrap time control daterangepicker and fix various bugs,

How to Use the bootstrap time control daterangepicker and fix various bugs,

Double calendar time period selection plug-in-daterangepicker is a later time control of the bootstrap framework. You can set multiple time period options or customize the time period. You can select the start time and end time by yourself, the maximum time span can be set in the program.

I. References

Daterangepicker depends on monent. js and jquery. Therefore, monent. js, jquery, and bootstrap must be introduced before daterangepicker is introduced.

<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 seaj. js, add

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.) (the source code that you encounter in the project at the moment is available and ready for use. It is not transparent yet and remains to be improved)

Last join

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

Ii. Use

During use, pay attention to the datetimepicker parameter configuration (this can be found on the official website). Here I want to explain that you can download the source code on the official website, configure Parameters Based on the demo to understand their respective functions

You can configure different parameters by selecting the check box above. Here, we will briefly describe the parameters used in the project and how to use them.

Because the entire system of the project has a dual date or a single date, or there is a time minute second or no time minute second. Therefore, there are four combinations.

So I use the following:

/*** Calendar ** @ param obj eles Date input box * @ param boolean dobubble determines whether it is a double date (true) * @ param boolean secondNot whether there is a time/second (If yes, 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 ({"singleDatePi Cker ": singleNot, // whether it is a single date" timePicker ": secondNot, // whether the time is displayed" timePicker24Hour ": secondNot, // whether to display the "timePickerSeconds": secondNot, // whether to display the "showDropdowns": true, // whether to display the year and month drop-down options, you can quickly find the year in which "timePickerIncrement": 1, "calendar ars": false, // whether to start and end the connection. We recommend that you set this parameter to false. Otherwise, the date is always skipped, for the first time, the user will feel that the user's health check is extremely poor. "autoApply": true, // whether the application is automatically applied. If there is no time, minute or second, it can be automatically disabled after the selected date, "autoUpdateInput": false, // whether to automatically apply the initial date "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": ["August", "August ", "August September", "August October", "August November", "August December"], "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') ;}}; // clear $ (document ). off ('click ','. clearBtns '). on ('click ','. clearBtns ', function () {$ (eles ). val ('');})}

Because daterangepicker does not provide the clear function, and sometimes the date box is empty in project requirements, I add a cross button behind the input box. Such as the effect, to clear

Code can be used as a reference (there are various implementation methods)

<Div class = "input-group"> <input type = "text" name = "extractionDate11" id = "extractionDate11" class = "form-control dateStart" placeholder = "select start Time "readonly size =" 30 "> <div class =" input-group-addon clearBtns "> x </div> <span class =" caret "> </span>

For references in various situations:

Single date without time/minute/Second: calenders ("# bgrq", false, false );

Single date with hour/minute/Second: calenders ('# inputdate', false, true );

Double date without time/minute/Second: calenders ('# extractionDate11', true, false );

Dual date with time and minute in seconds: calenders ('# extractionDate11', true, true );

Iii. Problem Solving

1. Open the drop-down date box, click the blank space, and close the date box.

Because daterangepicker does the following functions: After clicking the drop-down date box, click somewhere else on the page, and the date box is closed, the previously selected date value is automatically saved to the date box, in our habits, such an operation is equivalent to canceling, so we should make a modification on the source code:

Search for the outsideClick method in the source code:

Replace this. hide.

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, you must change the "show" method. Otherwise, if you select "double date", if you only select a date and then click a blank space, then an error is returned when you click "input" next time, it cannot be used any more.

/*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 date is empty at the beginning.

Daterangepicker automatically assigns the current date to the bound input box at the beginning, that is, the parameter "autoUpdateInput": true/false. When it is true, the date is automatically added, when false is selected, it is initially blank, but it will not be automatically applied in some cases after the date is selected. So we need to make some changes (this blog is used for reference). Here we are more clear.

(Reference: here we can use the autoUpdateInput attribute. autoUpdateInput is used to enable or disable the DOM attribute of daterangepicker, and whether to automatically pass the value to the DOM attribute of input [text, by setting the initial autoUpdateInput to false, you can set the initial value to null. This is the result of the placeholder set in input. However, no matter how you select the date of daterangePikcer after this attribute is set, no value is transferred to the input, that is, there is no way to display the selected date normally, so at the right time, call $ (id ). data ('daterangepicker '). autoUpdateInput = true. The default value is null. autoUpadateInput = true when the input of daterangepicker is clicked. However, input automatically has a value regardless of the selected date, to solve this problem, I modified it in the source code of daterangepicker. Of course, I can also change the onclick event.

In the source code, when autoUpdateInput is set to false, we want to change autoUpdateInput back by clicking OK, selecting the date and clicking range. Therefore, set this in three places. autoUpdateInput = true attribute)

1) In the clickRange method of around 1210 rows: Add the following code as follows:

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) add this. autoUpdateInput = true at around 1340 rows, as shown in the following code:

} 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) add this. autoUpdateInput = true to the clickApply method about 1400 rows;

clickApply: function(e) { this.autoUpdateInput=true; this.hide(); this.element.trigger('apply.daterangepicker', this); },

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.