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 相关文章推荐
DOM基础教程之事件类型
Jan 20 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 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 图片上传类代码
2009/07/17 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
简单实现php上传文件功能
2017/09/21 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python实现俄罗斯方块
2018/06/26 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
计算机应用与科学个人的自我评价
2013/11/15 职场文书
大型晚会策划方案
2014/02/06 职场文书
网络书店创业计划书
2014/02/07 职场文书
12月红领巾广播稿
2014/02/13 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
五年级小学生评语
2014/12/26 职场文书
产品调价通知函
2015/04/20 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
前端JavaScript大管家 package.json
2021/11/02 Javascript