這篇文章給大家分享的是有關(guān)bootstrap時間控件daterangepicker怎么用的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
目前創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、寧蒗網(wǎng)站維護(hù)等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
雙日歷時間段選擇插件 — daterangepicker是bootstrap框架后期的一個時間控件,可以設(shè)定多個時間段選項,也可以自定義時間段,由用戶自己選擇起始時間和終止時間,時間段的最大跨度可以在程序里設(shè)定。
一、引用
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的源代碼)(此刻在項目中遇到,自己折騰的出來的,可用;還不通透,有待進(jìn)步)
最后面加入
define("gallery/daterangepicker/1.3.7/daterangepicker-bs3.css",[],function(){ seajs.importStyle(".daterangepicker{position:absolute;color:inherit;.........}" )}) })
二、使用
在使用中,需要注意datetimepicker的參數(shù)配置(這個在官網(wǎng)上都可以查到),此處我想說明的是,可以在官網(wǎng)上下載源碼,根據(jù)其demo來配置參數(shù)了解其各個用處
在上面的復(fù)選框中通過選擇,可以配置不同的參數(shù)。此處簡單說明一下自己在項目中所用到的參數(shù),以及使用方法。
由于項目整個系統(tǒng),存在雙日期或者單日期,或者有時分秒或者無時分秒。所以兩兩組合分為四種情況。
所以我使用以下:
/** * 日歷 * @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,//是否開始和結(jié)束連動,建議設(shè)為false,不然日期一直跳來跳去,首次使用者會覺得用戶體檢極度不佳 "autoApply":true,//是否自動應(yīng)用,不帶時分秒的都可以實現(xiàn)在選擇完日期后自動關(guān)閉,帶時分秒時不會自動關(guān)閉 "autoUpdateInput":false, //是否自動應(yīng)用初始當(dāng)前日期 "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(''); }) }
由于daterangepicker沒有自帶清空功能,而項目要求中,有時候日期框要為空,所以我在input框后面加了一個叉按鈕。如下圖效果,實現(xiàn)清空
代碼可以作為參考(這個有各種實現(xiàn)方式)
<div class="input-group"> <input type="text" name="extractionDate11" id="extractionDate11" class="form-control dateStart" placeholder="請選擇起始時間" readonly size="30"> <div class="input-group-addon clearBtns">x</div> </div> <span class="caret"></span>
而對于各種情況下的的引用:
單日期不帶時分秒: calenders("#bgrq",false,false);
單日期帶時分秒:calenders('#inputDate',false,true);
雙日期不帶時分秒: calenders('#extractionDate11',true,false);
雙日期帶時分秒:calenders('#extractionDate11',true,true);
三、問題解決
1、點開下拉日期框,點擊空白處,日期框關(guān)閉,傳值問題
由于daterangepicker所做的功能是:在點開下拉日期框后,點擊頁面其他地方,日期框關(guān)閉,此時之前所選的日期值就自動保存到日期框上,而我們的習(xí)慣時,這樣的操作相當(dāng)于取消,所以在源碼上做一修改:
在源碼中搜索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('.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); },
同時,必須將show方法中的更改,否則當(dāng)用戶選擇雙日期時若只選擇了一個日期然后點擊空白處,而下一次再點擊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框自動賦值當(dāng)前日期,即參數(shù) "autoUpdateInput":true/false, 當(dāng)其為true時會自動加上日期,在選擇false時就初始為空,可是在后面選擇日期后有的情況下不會自動應(yīng)用。所以要做一些修改(此借鑒于此博客)此處我們更明晰一點
(引用:在此我們可以使用autoUpdateInput屬性,autoUpdateInput是用來打開和關(guān)閉daterangepicker選擇時,是否自動傳值到input[text] 這個DOM的屬性,通過設(shè)置初始autoUpdateInput為false,可以實現(xiàn)初始值為空,這是在input中設(shè)置的placeholder才能正常顯現(xiàn)出來。但是設(shè)置該屬性之后,不管怎么選擇daterangePikcer的日期,都不會有傳值到input中,也就是沒有辦法正常顯示選擇的日期了,所以要在恰當(dāng)?shù)臅r刻,調(diào)用$(id).data('daterangepicker').autoUpdateInput=true,就可以了。作者最初設(shè)置為,最初默認(rèn)值為空,當(dāng)daterangepicker 的input發(fā)生點擊時,autoUpadateInput=true,但是這時出現(xiàn)input不管是否選中日期,都會自動有值,所以為了修改這個問題,我在daterangepicker的源碼中進(jìn)行了修改,當(dāng)然也可以重新更改需要的onclick事件。
在源碼中,當(dāng)autoUpdateInput設(shè)置為false之后,我們想要在點擊確定,選中日期和點擊range三個地方,將autoUpdateInput改變回來,所以,在三處設(shè)置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); },
感謝各位的閱讀!關(guān)于“bootstrap時間控件daterangepicker怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
當(dāng)前標(biāo)題:bootstrap時間控件daterangepicker怎么用
網(wǎng)址分享:http://bm7419.com/article8/gipoop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、App設(shè)計、網(wǎng)站設(shè)計、企業(yè)建站、、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)