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 相关文章推荐
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
js获取内联样式的方法
Jan 27 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
php简单的上传类分享
2016/05/15 PHP
PHP时间函数使用详解
2019/03/21 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
做网页的一些技巧
2007/02/01 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
Python中super函数的用法
2017/11/17 Python
机器学习10大经典算法详解
2017/12/07 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
什么是聚集索引和非聚集索引
2012/01/17 面试题
会务接待方案
2014/02/27 职场文书
挂牌仪式主持词
2014/03/20 职场文书
大学计划书范文800字
2014/08/14 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
党员个人自我评价
2015/03/03 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang