Explication détaillée de l'utilisation du contrôle daterangepicker

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du contrôle daterangepicker Quelles sont les précautions d'utilisation du contrôle daterangepicker Les voici ? les cas réels. Jetons un coup d'oeil une fois.

Plug-in de sélection de période de temps à double calendrier : daterangepicker est un contrôle de temps dans la dernière étape du framework bootstrap. Il peut définir plusieurs options de période de temps ou personnaliser la période de temps, ainsi que la période. l'utilisateur peut le choisir. L'heure de début et l'heure de fin, ainsi que la durée maximale de la période de temps peuvent être définies dans le programme.

1. Citation

daterangepicker s'appuie sur monent.js et jquery. Par conséquent, monent.js, jquery et bootstrap doivent être introduits avant d'introduire daterangepicker.

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

Ou lorsque vous utilisez une programmation modularisée , comme lorsque vous utilisez seaj.js, ajoutez

devant la compression entière du code définir("gallery/daterangepicker/1.3.7/daterangepicker",["jquery","moment","./daterangepicker-bs3.css"],
function(a){a("jquery");window .moment=a("moment"),a("./daterangepicker-bs3.css"),

(Le code source de daterangepicker.js peut être ajouté au milieu) (Je l'ai rencontré dans le projet en ce moment, et il est utilisable ; il n'est pas encore clair et doit être amélioré)  

Ajoutez

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

à la fin 2. Utiliser

Lors de l'utilisation, vous devez faire attention à la configuration des paramètres de datetimepicker (cela peut être trouvé sur le site officiel). Ce que je veux expliquer ici, c'est que vous pouvez télécharger le code source sur le site officiel et configurer les paramètres en fonction de celui-ci. démo pour comprendre ses différentes utilisations

Différents paramètres peuvent être configurés en sélectionnant dans la case à cocher ci-dessus. Voici une brève explication des paramètres que j'ai utilisés dans le projet et comment les utiliser.

En raison de l'ensemble du système du projet, il y a des dates doubles ou des dates simples, ou il y a des heures, des minutes et des secondes ou pas d'heures, de minutes et de secondes. Par conséquent, les combinaisons par paires sont divisées en quatre situations.

J'utilise donc ce qui suit :

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

Étant donné que daterangepicker n'a pas sa propre fonction d'effacement et que les exigences du projet exigent parfois que la zone de date soit vide, j'ai donc ajouté un bouton en forme de croix derrière la zone de saisie. Comme indiqué ci-dessous, effacer

Le code peut être utilisé comme référence (il existe différentes manières de l'implémenter)

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

Et pour des devis dans diverses situations :

Date unique sans heures, minutes et secondes : calendriers("#bgrq",false,false);

Date unique avec heures, minutes et secondes : calendriers('#inputDate',false,true);

Double date sans heures, minutes et secondes : calendriers('#extractionDate11',true,false);

Double date avec heures, minutes et secondes : calendriers('#extractionDate11',true,true);

3. Résolution de problèmes

1. Cliquez sur la zone de date déroulante, cliquez sur l'espace vide, la zone de date est fermée et la valeur est transmise

Puisque la fonction de daterangepicker est la suivante : après avoir cliqué sur la zone de date déroulante, cliquez ailleurs sur la page, la zone de date est fermée et la valeur de date précédemment sélectionnée est automatiquement enregistrée dans la zone de date, et nous sommes habitués à un tel opération Cela équivaut à une annulation, faites donc une modification dans le code source :

Recherchez la méthode outsideClick dans le code source :

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

En même temps, les modifications dans la méthode show doivent être apportées, sinon lorsque l'utilisateur sélectionne des dates doubles, s'il sélectionne une seule date puis clique sur l'espace vide, et la prochaine fois qu'il clique sur la zone de saisie, une erreur sera signalé et ne pourra plus être utilisé.

/*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. Le problème que la date soit initialement vide

Daterangepicker attribuera automatiquement la date actuelle à la zone de saisie liée au début, c'est-à-dire le paramètre "autoUpdateInput": vrai/faux, Lorsqu'elle est vraie, la date sera automatiquement ajoutée. Lorsque faux est sélectionné, elle sera initialement vide. Cependant, dans certains cas, elle ne sera pas automatiquement appliquée après avoir sélectionné la date ultérieurement. Il faut donc faire quelques modifications (c'est emprunté à ce blog) Ici on est un peu plus clair

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!