Detaillierte Erläuterung der Verwendung des Daterangepicker-Steuerelements

Dieses Mal werde ich Ihnen die Verwendung des Daterangepicker-Steuerelements ausführlich erläutern. Welche Vorsichtsmaßnahmen gibt es für die Verwendung des Daterangepicker-Steuerelements? Werfen wir einen Blick auf die tatsächlichen Fälle.

Dual-Kalender-Zeitraumauswahl-Plug-in – daterangepicker ist eine Zeitsteuerung in der späteren Phase des Bootstrap-Frameworks. Es kann mehrere Zeitraumoptionen festlegen oder den Zeitraum anpassen Der Benutzer kann die Start- und Endzeit sowie die maximale Zeitspanne im Programm festlegen.

1. Zitat

daterangepicker basiert auf monent.js und jquery. Daher müssen monent.js, jquery und Bootstrap eingeführt werden, bevor daterangepicker eingeführt wird.

<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" />

Oder fügen Sie bei Verwendung von modularisierter Programmierung, z. B. bei Verwendung von seaj.js,

vor der gesamten Codekomprimierung hinzu define("gallery/daterangepicker/1.3.7/daterangepicker",["jquery","moment","./daterangepicker-bs3.css"],
function(a){a("jquery");window .moment=a("moment"),a("./daterangepicker-bs3.css"),

(Der Quellcode von daterangepicker.js kann in der Mitte hinzugefügt werden) (Ich bin im Moment im Projekt darauf gestoßen und er ist verwendbar; er ist noch nicht klar und muss verbessert werden)  

Fügen Sie am Ende

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

hinzu 2. Verwendung

Bei der Verwendung müssen Sie auf die Parameterkonfiguration von datetimepicker achten (diese finden Sie auf der offiziellen Website). Ich möchte hier erklären, dass Sie den Quellcode auf der offiziellen Website herunterladen und die Parameter entsprechend konfigurieren können Demo, um die verschiedenen Verwendungsmöglichkeiten zu verstehen

Verschiedene Parameter können durch Auswahl im Kontrollkästchen oben konfiguriert werden. Hier ist eine kurze Erklärung der Parameter, die ich im Projekt verwendet habe, und wie ich sie verwende.

Aufgrund der Gesamtsystematik des Projekts gibt es Doppeltermine oder Einzeltermine, es gibt Stunden, Minuten und Sekunden oder keine Stunden, Minuten und Sekunden. Daher werden paarweise Kombinationen in vier Situationen unterteilt.

Daher verwende ich Folgendes:

/**
 * 日历
 * @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('');
 })
}

Da daterangepicker keine eigene Löschfunktion hat und die Projektanforderungen es manchmal erfordern, dass das Datumsfeld leer ist, habe ich hinter dem Eingabefeld eine Kreuzschaltfläche hinzugefügt. Wie unten gezeigt, Löschen

Der Code kann als Referenz verwendet werden (es gibt verschiedene Möglichkeiten, dies zu implementieren)

<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>

Und für Zitate in verschiedenen Situationen:

Einzelnes Datum ohne Stunden, Minuten und Sekunden: calenders("#bgrq",false,false);

Einzelnes Datum mit Stunden, Minuten und Sekunden: Calendars('#inputDate',false,true);

Doppeltes Datum ohne Stunden, Minuten und Sekunden: calenders('#extractionDate11',true,false);

Doppeltes Datum mit Stunden, Minuten und Sekunden: Calendars('#extractionDate11',true,true);

3. Problemlösung

1. Klicken Sie auf das Dropdown-Datumsfeld, klicken Sie auf die leere Stelle, das Datumsfeld wird geschlossen und der Wert wird übergeben

Da die Funktion von daterangepicker darin besteht, nach dem Klicken auf das Dropdown-Datumsfeld an eine andere Stelle auf der Seite zu klicken, wird das Datumsfeld geschlossen und der zuvor ausgewählte Datumswert wird automatisch im Datumsfeld gespeichert, und wir sind daran gewöhnt Der Vorgang entspricht einem Abbruch. Nehmen Sie daher eine Änderung im Quellcode vor:

Suchen Sie im Quellcode nach der OutsideClick-Methode:

Ersetzen Sie this.hide() darin.

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

Gleichzeitig müssen die Änderungen in der Show-Methode vorgenommen werden, da sonst bei der Auswahl von zwei Daten durch den Benutzer, wenn er nur ein Datum auswählt und dann auf das Leerzeichen klickt, und beim nächsten Klicken auf das Eingabefeld ein Fehler auftritt werden gemeldet und können nicht mehr verwendet werden.

/*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. Das Problem, dass das Datum zunächst leer ist

Daterangepicker weist dem gebundenen Eingabefeld am Anfang, also dem Parameter, automatisch das aktuelle Datum zu „autoUpdateInput“:true/false, Wenn es „true“ ist, wird das Datum automatisch hinzugefügt. Wenn „false“ ausgewählt ist, ist es zunächst leer. In einigen Fällen wird es jedoch nicht automatisch angewendet, nachdem das Datum später ausgewählt wurde. Daher müssen wir einige Änderungen vornehmen (dies ist diesem Blog entlehnt). Hier sind wir etwas klarer

（引用：在此我们可以使用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效果

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Daterangepicker-Steuerelements. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!