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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
js中eval详解
Mar 30 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
详解CocosCreator消息分发机制
Apr 16 Javascript
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
一个域名查询的程序
2006/10/09 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
python strip()函数 介绍
2013/05/24 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python如何生成树形图案
2018/01/03 Python
全面分析Python的优点和缺点
2018/02/07 Python
谈谈python中GUI的选择
2018/03/01 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
客户服务经理岗位职责
2014/01/29 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
企业公益活动策划方案
2014/08/24 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
毕业生对母校寄语
2015/02/26 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
新员工入职感想
2015/08/07 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript