bootstrap时间控件daterangepicker使用方法及各种小bug修复

前端之家收集整理的这篇文章主要介绍了bootstrap时间控件daterangepicker使用方法及各种小bug修复前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定。

一、引用

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

或者在使用模块化编程时,比如使用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的源代码)(此刻在项目中遇到,自己折腾的出来的,可用;还不通透,有待进步)  

最后面加入

二、使用

在使用中,需要注意datetimepicker的参数配置(这个在官网上都可以查到),此处我想说明的是,可以在官网上下载源码,根据其demo来配置参数了解其各个用处

在上面的复选框中通过选择,可以配置不同的参数。此处简单说明一下自己在项目中所用到的参数,以及使用方法

由于项目整个系统,存在双日期或者单日期,或者有时分秒或者无时分秒。所以两两组合分为四种情况。

所以我使用以下:

$(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框后面加了一个叉按钮。如下图效果,实现清空

代码可以作为参考(这个有各种实现方式)

而对于各种情况下的的引用:

单日期不带时分秒: calenders("#bgrq",false,false);

单日期带时分秒:calenders('#inputDate',true);

双日期不带时分秒: calenders('#extractionDate11',true,false);

双日期带时分秒:calenders('#extractionDate11',true);

三、问题解决

1、点开下拉日期框,点击空白处,日期框关闭,传值问题

由于daterangepicker所做的功能是:在点开下拉日期框后,点击页面其他地方,日期框关闭,此时之前所选的日期值就自动保存到日期框上,而我们的习惯时,这样的操作相当于取消,所以在源码上做一修改

在源码中搜索outsideClick方法

将其中的this.hide()替换。

同时,必须将show方法中的更改,否则当用户选择双日期时若只选择了一个日期然后点击空白处,而下一次再点击input框时就报错了,无法再使用了。

IoUsRightTime = 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方法中:添加可以如下对照以下代码

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; 请对照以下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/bootstrap/35585.html

猜你在找的Bootstrap相关文章