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 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
javascript的BOM
May 03 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
vue 中swiper的使用教程
May 22 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
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+mysql 实现身份验证代码
2010/03/24 PHP
php表单提交实例讲解
2015/11/12 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
儿童python练习实例
2018/05/27 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python并发和异步编程实例
2018/11/15 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
python 实现端口扫描工具
2020/12/18 Python
销售总监岗位职责
2014/01/04 职场文书
物业工作计划书
2014/01/10 职场文书
对公司合理化的建议书
2014/03/12 职场文书
干部作风建设心得体会
2014/10/22 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
总结python多进程multiprocessing的相关知识
2021/06/29 Python
nginx实现动静分离的方法示例
2021/11/07 Servers