首頁  >  文章  >  web前端  >  bootstrap時間控制daterangepicker的使用方法

bootstrap時間控制daterangepicker的使用方法

不言
不言原創
2018-06-25 11:35:162262瀏覽

這篇文章主要介紹了bootstrap時間控制daterangepicker使用方法,及各種小bug修復,具有一定的參考價值,感興趣的小伙伴們可以參考一下

雙日曆時間段選擇插件— daterangepicker是bootstrap框架後期的一個時間控件,可以設定多個時間段選項,也可以自訂時間段,由使用者自行選擇起始時間和終止時間,時間段的最大跨度可以在程式中設定。

一、引用

daterangepicker依托monent.js 和jquery使用。所以在使用中在引入daterangepicker之前必須引入monent.js和jquery以及bootstrap。

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

或是使用模組化程式設計時,例如使用seaj.js時,在整個程式碼壓縮前面加入

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

(中間可以加入daterangepicker.js的原始碼)(此刻在專案中遇到,自己折騰的出來的,可用;還不通透,有待進步)  

最後面加入

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

二、使用

在使用中,需要注意datetimepicker的參數配置(這個在官網上都可以查到),這裡我想說明的是,可以在官網上下載源碼,根據其demo來配置參數了解其各個用處

#在上面的複選框中通過選擇,可以配置不同的參數。此處簡單說明一下自己在專案中所用到的參數,以及使用方法。

由於專案整個系統,存在雙日期或單日期,或有時分秒或無時分秒。所以兩兩組合分為四種情況。

所以我使用以下:

/**
 * 日历
 * @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(&#39;YYYY-MM-DD HH:mm:ss&#39;)+&#39;~&#39;+end.format(&#39;YYYY-MM-DD HH:mm:ss&#39;)));
 }else if(secondNot ==false&&dobubble ==true){
  $(eles).val($.trim(start.format(&#39;YYYY-MM-DD&#39;)+&#39;~&#39;+ end.format(&#39;YYYY-MM-DD&#39;)));
 }else if(secondNot ==false&&dobubble ==false){
  $(eles).val(start.format(&#39;YYYY-MM-DD&#39;));
 }else if(secondNot ==true&&dobubble ==false){
  $(eles).val(start.format(&#39;YYYY-MM-DD HH:mm:ss&#39;));
 }
 });
 //清空
 $(document).off(&#39;click&#39;,&#39;.clearBtns&#39;).on(&#39;click&#39;,&#39;.clearBtns&#39;,function(){
 $(eles).val(&#39;&#39;);
 })
}

#由於daterangepicker沒有自帶清空功能,而專案要求中,有時日期框要為空,所以我在input框後面加了一個叉按鈕。如下圖效果,實作清空

程式碼可以作為參考(這個有各種實作方式)

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

而對於各種情況下的引用:

單日期不帶時分秒: calenders("#bgrq",false,false);

單日期帶時分秒:calenders ('#inputDate',false,true);

雙日期不帶時分秒: calenders('#extractionDate11',true,false);

#雙日期帶時分秒:calenders( '#extractionDate11',true,true);

三、問題解決

1、點開下拉日期框,點選空白處,日期框關閉,傳值問題

由於daterangepicker所做的功能是:在點開下拉日期框後,點擊頁面其他地方,日期框關閉,此時之前所選的日期值就自動保存到日期框上,而我們的習慣時,這樣的操作相當於取消,所以在原始碼上做一修改:

在原始碼中搜尋outsideClick方法:

將其中的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(&#39;.calendar-table&#39;).length
 ) return;
 // this.hide();
 if (this.isShowing){
 $(document).off(&#39;.daterangepicker&#39;);
 $(window).off(&#39;.daterangepicker&#39;);
 this.container.hide();
 this.element.trigger(&#39;hide.daterangepicker&#39;, this);
 this.isShowing = false;
 }
 this.element.trigger(&#39;outsideClick.daterangepicker&#39;, this);
},

同時,必須將show方法中的更改,否則當使用者選擇雙日期時若只選擇了一個日期然後點擊空白處,而下一次再點選input框時就報錯了,無法再使用了。

/*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、日期初始為空的問題

daterangepicker在初始時會給所綁定的input框自動賦值當前日期,即參數"autoUpdateInput":true/false,  當其為true時會自動加上日期,在選擇false時就初始為空,可是在後面選擇日期後有的情況下不會自動套用。所以要做一些修改(此借鑑於此博客)此處我們更明確一點

(引用:在此我們可以使用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(&#39;data-range-key&#39;);
 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(&#39;day&#39;);
  this.endDate.endOf(&#39;day&#39;);
 }

 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(&#39;.right .hourselect&#39;).val(), 10);
 if (!this.timePicker24Hour) {
  var ampm = this.container.find(&#39;.right .ampmselect&#39;).val();
  if (ampm === &#39;PM&#39; && hour < 12)
  hour += 12;
  if (ampm === &#39;AM&#39; && hour === 12)
  hour = 0;
 }

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

BootStrap的可视化布局

关于Bootstrap中form和navbar使用方法的解析

以上是bootstrap時間控制daterangepicker的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn