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");=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('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框后⾯加了⼀个叉按钮。如下图效果，实现清空
代码可以作为参考（这个有各种实现⽅式）
<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>bootstrap项目
⽽对于各种情况下的的引⽤：
单⽇期不带时分秒： 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
target.closest(this.element).length ||
target.ainer).length ||
target.closest('.calendar-table').length
) return;
// this.hide();
if (this.isShowing){
$(document).off('.daterangepicker');
$(window).off('.daterangepicker');
igger('hide.daterangepicker', this);
this.isShowing = false;
}
igger('outsideClick.daterangepicker', this);
},
同时，必须将show⽅法中的更改，否则当⽤户选择双⽇期时若只选择了⼀个⽇期然后点击空⽩处，⽽下⼀次再点击input框时就报错了，⽆法再使⽤了。
/*this.oldStartDate = this.startDate.clone();
this.oldEndDate = dDate.clone();
this.previousRightTime = dDate.clone();*/
this.oldStartDate = this.startDate;
this.oldEndDate = dDate;
this.previousRightTime = dDate;
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 = Attribute('data-range-key');
this.chosenLabel = label;
if (label == this.locale.customRangeLabel) {
this.showCalendars();
// } else {
}else if (!dDate && 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];
if (!this.timePicker) {
this.startDate.startOf('day');
}
if (!this.alwaysShowCalendars)
this.hideCalendars();
this.clickApply();
}
},
2）、在1340⾏左右，两处添加 this.autoUpdateInput=true; 请对照以下：
} else if (!dDate && 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 = ainer.find('.right .hourselect').val(), 10);
if (!this.timePicker24Hour) {
var ampm = ainer.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();
igger('apply.daterangepicker', this);
},
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论