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


Posted in Javascript onOctober 25, 2017

双日历时间段选择插件 — 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来配置参数了解其各个用处

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

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

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

所以我使用以下:

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

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

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

<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、点开下拉日期框,点击空白处,日期框关闭,传值问题

由于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('.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方法中的更改,否则当用户选择双日期时若只选择了一个日期然后点击空白处,而下一次再点击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('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);
 },

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
vue项目前端埋点的实现
Mar 06 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 #Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 #Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 #Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 #Javascript
JS获取当前地理位置的方法
Oct 25 #Javascript
JavaScript 异步调用
Oct 25 #Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
理解javascript模块化
2016/03/28 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
Promise.all中对于reject的处理方法
2018/08/01 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Python性能优化的20条建议
2014/10/25 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
团队精神的演讲稿
2014/05/14 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js