bootstrap datetimepicker控件位置异常的解决方法


Posted in Javascript onNovember 23, 2017

今天在写毕设的时候,用到了bootstrap-datetimepicker作为日期控件。

在git上clone下最新的代码,运行demo,发现控件区域整体下移1000px左右。

作为一个准备拿来就用的后台程序猿,此刻我的内心是崩溃的…

百度了很久,没有找到对应的解决方案,于是自己动手去源码修改。

最终解决方案:

打开源码,的bootstrap-datetimepicker.js文件

line 527行,打开这一段注释即可

/*if (this.pickerPosition == 'top-left' || this.pickerPosition == 'top-right') {
    top = offset.top - this.picker.outerHeight();
   } else {
    top = offset.top + this.height;
   }*/

如果看着还是不是很舒服的话,建议注释掉line 533 - line 544

top = top - containerOffset.top + 169;
left = left - containerOffset.left + 210;

为什么要这样解决呢?

place: function () {
   if (this.isInline) return;

   if (!this.zIndex) {
    var index_highest = 0;
    $('div').each(function () {
     var index_current = parseInt($(this).css('zIndex'), 10);
     if (index_current > index_highest) {
      index_highest = index_current;
     }
    });
    this.zIndex = index_highest + 10;
   }

   var offset, top, left, containerOffset;
   if (this.container instanceof $) {
    containerOffset = this.container.offset();
   } else {
    containerOffset = $(this.container).offset();
   }

   if (this.component) {
    offset = this.component.offset();
    left = offset.left;
    if (this.pickerPosition == 'bottom-left' || this.pickerPosition == 'top-left') {
     left += this.component.outerWidth() - this.picker.outerWidth();
    }
   } else {
    offset = this.element.offset();
    left = offset.left;
   }

   var bodyWidth = document.body.clientWidth || window.innerWidth;
   if (left + 220 > bodyWidth) {
    left = bodyWidth - 220;
   }

   /*if (this.pickerPosition == 'top-left' || this.pickerPosition == 'top-right') {
    top = offset.top - this.picker.outerHeight();
   } else {
    top = offset.top + this.height;
   }*/

   top = top - containerOffset.top + 169;
   left = left - containerOffset.left + 210;

   this.picker.css({
    top:  top,
    left:  left,
    zIndex: this.zIndex
   });
  },

上面就是相关的源码,可以看到,注释了line 527行之后,在后面引用了一个未初始化过的top变量

嗯… 这是一个没经过测试就提交的小BUG…

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

Javascript 相关文章推荐
JS原型对象通俗"唱法"
Dec 27 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 #Javascript
bootstrap实现二级下拉菜单效果
Nov 23 #Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 #Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 #Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 #Javascript
基于Bootstrap实现城市三级联动
Nov 23 #Javascript
bootstrap-Treeview实现级联勾选
Nov 23 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
php简单获取目录列表的方法
2015/03/24 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
python实现批量命名照片
2020/06/18 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
打印机墨盒:123Inkjets
2017/02/16 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
自荐信模版
2013/10/24 职场文书
小学生美德少年事迹
2014/02/02 职场文书
实习生岗位职责
2014/04/12 职场文书
《赶海》教学反思
2014/04/20 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
会计求职自荐信
2015/03/26 职场文书
董事会决议范本
2015/07/01 职场文书