bootstrap時(shí)間控件daterangepicker使用方法及各種小bug修復(fù)
雙日歷時(shí)間段選擇插件 — daterangepicker是bootstrap框架后期的一個(gè)時(shí)間控件，可以設(shè)定多個(gè)時(shí)間段選項(xiàng)，也可以自定義時(shí)間段，由用戶自己選擇起始時(shí)間和終止時(shí)間，時(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" />
或者在使用模塊化編程時(shí)，比如使用seaj.js時(shí)，在整個(gè)代碼壓縮前面加入
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的源代碼）（此刻在項(xiàng)目中遇到，自己折騰的出來(lái)的，可用；還不通透，有待進(jìn)步）
最后面加入
define("gallery/daterangepicker/1.3.7/daterangepicker-bs3.css",[],function(){
seajs.importStyle(".daterangepicker{position:absolute;color:inherit;.........}"
)})
})
二、使用
在使用中，需要注意datetimepicker的參數(shù)配置（這個(gè)在官網(wǎng)上都可以查到），此處我想說(shuō)明的是，可以在官網(wǎng)上下載源碼，根據(jù)其demo來(lái)配置參數(shù)了解其各個(gè)用處
在上面的復(fù)選框中通過(guò)選擇，可以配置不同的參數(shù)。此處簡(jiǎn)單說(shuō)明一下自己在項(xiàng)目中所用到的參數(shù)，以及使用方法。
由于項(xiàng)目整個(gè)系統(tǒng)，存在雙日期或者單日期，或者有時(shí)分秒或者無(wú)時(shí)分秒。所以兩兩組合分為四種情況。
所以我使用以下：
/**
* 日歷
* @param obj eles 日期輸入框
* @param boolean dobubble 是否為雙日期（true）
* @param boolean secondNot 有無(wú)時(shí)分秒（有則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,//時(shí)間顯示與否
"timePicker24Hour": secondNot,//是否按24小時(shí)式來(lái)顯示
"timePickerSeconds": secondNot,//是否帶秒
"showDropdowns":true,//是否顯示年月下拉選項(xiàng)，可以快速定位到哪一年哪一月
"timePickerIncrement" :1,
"linkedCalendars": false,//是否開始和結(jié)束連動(dòng)，建議設(shè)為false，不然日期一直跳來(lái)跳去，首次使用者會(huì)覺得用戶體檢極度不佳
"autoApply":true,//是否自動(dòng)應(yīng)用，不帶時(shí)分秒的都可以實(shí)現(xiàn)在選擇完日期后自動(dòng)關(guān)閉，帶時(shí)分秒時(shí)不會(huì)自動(dòng)關(guān)閉
"autoUpdateInput":false, //是否自動(dòng)應(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沒有自帶清空功能，而項(xiàng)目要求中，有時(shí)候日期框要為空，所以我在input框后面加了一個(gè)叉按鈕。如下圖效果，實(shí)現(xiàn)清空
代碼可以作為參考（這個(gè)有各種實(shí)現(xiàn)方式）
<div class="input-group"> <input type="text" name="extractionDate11" id="extractionDate11" class="form-control dateStart" placeholder="請(qǐng)選擇起始時(shí)間" readonly size="30"> <div class="input-group-addon clearBtns">x</div> </div> <span class="caret"></span>
而對(duì)于各種情況下的的引用：
單日期不帶時(shí)分秒： calenders("#bgrq",false,false);
單日期帶時(shí)分秒：calenders('#inputDate',false,true);
雙日期不帶時(shí)分秒： calenders('#extractionDate11',true,false);
雙日期帶時(shí)分秒：calenders('#extractionDate11',true,true);
三、問題解決
1、點(diǎn)開下拉日期框，點(diǎn)擊空白處，日期框關(guān)閉，傳值問題
由于daterangepicker所做的功能是：在點(diǎn)開下拉日期框后，點(diǎn)擊頁(yè)面其他地方，日期框關(guān)閉，此時(shí)之前所選的日期值就自動(dòng)保存到日期框上，而我們的習(xí)慣時(shí)，這樣的操作相當(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);
},
同時(shí)，必須將show方法中的更改，否則當(dāng)用戶選擇雙日期時(shí)若只選擇了一個(gè)日期然后點(diǎn)擊空白處，而下一次再點(diǎn)擊input框時(shí)就報(bào)錯(cuò)了，無(wú)法再使用了。
/*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在初始時(shí)會(huì)給所綁定的input框自動(dòng)賦值當(dāng)前日期，即參數(shù) "autoUpdateInput":true/false, 當(dāng)其為true時(shí)會(huì)自動(dòng)加上日期，在選擇false時(shí)就初始為空，可是在后面選擇日期后有的情況下不會(huì)自動(dòng)應(yīng)用。所以要做一些修改（此借鑒于此博客）此處我們更明晰一點(diǎn)
（引用：在此我們可以使用autoUpdateInput屬性，autoUpdateInput是用來(lái)打開和關(guān)閉daterangepicker選擇時(shí)，是否自動(dòng)傳值到input[text] 這個(gè)DOM的屬性，通過(guò)設(shè)置初始autoUpdateInput為false，可以實(shí)現(xiàn)初始值為空，這是在input中設(shè)置的placeholder才能正常顯現(xiàn)出來(lái)。但是設(shè)置該屬性之后，不管怎么選擇daterangePikcer的日期，都不會(huì)有傳值到input中，也就是沒有辦法正常顯示選擇的日期了，所以要在恰當(dāng)?shù)臅r(shí)刻，調(diào)用$(id).data('daterangepicker').autoUpdateInput=true,就可以了。作者最初設(shè)置為，最初默認(rèn)值為空，當(dāng)daterangepicker 的input發(fā)生點(diǎn)擊時(shí)，autoUpadateInput=true，但是這時(shí)出現(xiàn)input不管是否選中日期，都會(huì)自動(dòng)有值，所以為了修改這個(gè)問題，我在daterangepicker的源碼中進(jìn)行了修改，當(dāng)然也可以重新更改需要的onclick事件。
在源碼中，當(dāng)autoUpdateInput設(shè)置為false之后，我們想要在點(diǎn)擊確定，選中日期和點(diǎn)擊range三個(gè)地方，將autoUpdateInput改變回來(lái)，所以，在三處設(shè)置this.autoUpdateInput=true屬性）
1）在1210行左右的clickRange方法中：添加可以如下對(duì)照以下代碼：
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; 請(qǐng)對(duì)照以下：
} 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);
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js獲取客戶端操作系統(tǒng)類型的方法【測(cè)試可用】
這篇文章主要介紹了js獲取客戶端操作系統(tǒng)類型的方法,可有效的判斷常見操作系統(tǒng)的類型,包括Windows、MacOS、Unix及Linux等,涉及javascript頁(yè)面navigator.userAgent屬性操作技巧,需要的朋友可以參考下2016-05-05
swiper 解決動(dòng)態(tài)加載數(shù)據(jù)滑動(dòng)失效的問題
下面小編就為大家分享一篇swiper 解決動(dòng)態(tài)加載數(shù)據(jù)滑動(dòng)失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
下面小編就為大家分享一篇layui之select的option疊加問題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例
本文主要介紹了用JS寫了一個(gè)30分鐘倒計(jì)時(shí)器的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
JS實(shí)現(xiàn)仿新浪黃色經(jīng)典滑動(dòng)門效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿新浪黃色經(jīng)典滑動(dòng)門效果代碼,是一款非常簡(jiǎn)單的經(jīng)典鼠標(biāo)響應(yīng)滑動(dòng)切換效果,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的技巧,需要的朋友可以參考下2015-09-09
JavaScript通過(guò)function定義對(duì)象并給對(duì)象添加toString()方法實(shí)例分析
這篇文章主要介紹了JavaScript通過(guò)function定義對(duì)象并給對(duì)象添加toString()方法,實(shí)例分析了javascript中function定義對(duì)象及添加方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(1)
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建，集合是由一組無(wú)序且唯一的元素組成。數(shù)據(jù)結(jié)構(gòu)中的集合，對(duì)應(yīng)的是數(shù)學(xué)概念當(dāng)中的有限集合；下文詳細(xì)介紹需要的小伙伴可以參考一下2022-04-04
數(shù)組去重復(fù)是一個(gè)常見的需求，我們暫時(shí)考慮同類型的數(shù)組去重復(fù)。主要是理清思路和考慮下性能。以下方法，網(wǎng)上基本都有，這里只是簡(jiǎn)單地總結(jié)一下分享給大家。2015-04-04
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象拖放功能的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象拖放功能的方法,涉及javascript針對(duì)瀏覽器的判斷、事件愛你的添加與移除等相關(guān)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
Three.Js實(shí)現(xiàn)顏色自定義變換效果實(shí)例
這篇文章主要給大家介紹了關(guān)于Three.Js實(shí)現(xiàn)顏色自定義變換效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02