使用dadetimepicker进行时间选择是个很不错的选择,但是美中不足的是该插件在chrome中显示弹框的时候有时会出现位置错位的现象,而在IE中则没有这种现象,视图如图1

图1

查阅了网上的资料说这是插件的一个bug,需要修改bootstrap-datetimepicker.js插件中的源码才能够解决这个问题。https://github.com/smalot/bootstrap-datetimepicker/issues/363中的相关回答给出了解决问题的答案,大意就是修改第507行top = top /*+ document.body.scrollTop*/,就是将原代码改成top=top;五楼的@santiagofs给出了 if(this.container != 'body') top = top + document.body.scrollTop 这种修改方法,六楼的@bigjoevtrj大神赞成了这种解决方法。下面的@luupig 给出了另一种解决方法 if(this.container != 'body') top = top - containerOffset.top;

然而,然而,不知道为何,我的插件中使用这种方法并没有奏效,可能是我的bootstrap-datetimepicker.js插件和别人的版本不一样?最大的可能是自己并没有这种解决方法该作用于哪里。汗Σ( ° △ °|||)︴

但是在最后自己也找到了另外一种解决方法去解决了这个位置错位问题,解决方法如下:插件569-578行代码如图2

图2

在用chrome调试的过程中,代码走进了第一个if条件句,导致出现位置的错位。自己修改如图3

图3

具体修改就是将第一个if条件去掉,让代码走进else的条件句中。之后再根据你设置弹框出现的位置进行条件语句的选择。然而这样改仍然有一个问题,就弹框出现的水平位置略有偏差,如图4,略偏左。

图4

这里还需调整弹框出现的水平位置,修改代码如图5

图5

结果如图6:

图6

注:这篇博文纯属博主自己经验所得,文中所述方法并不一定适合所有情况,博主也没发现这么修改会不会有其他牵连的错误发生,还需看客擦亮自己的眼睛去识别对错真伪,如有错误,欢迎批评指正。

datetimepicker 插件位置问题解决经验的更多相关文章

  1. 1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期

    一.用datetimepicker插件实现限定时间范围的选择 1.下面是要实现的效果图,让开始时间只能从  2018-7-1  到 2018-7-7 选择. 2.html的结构 <div cla ...

  2. bootstrp的datetimepicker插件获取选定日期

    碰到一个日期选择,并将日期存储到数据库的需求,需要利用bootstrp的datetimepicker插件获取选定日期,并将其转换为指定字符窜,简单记录下实现的过程. 1. datetimepicker ...

  3. 使用jQuery的datetimepicker插件

    因为后台系统要使用年月日时分的设置,又因为使用的Bootstrap框架只有datepicker和timepicker控件.所以在jQuery库中找到轻量级的datetimepicker插件,很好地解决 ...

  4. 手把手教你5分钟从零开发一款简易的IDEA插件!项目经验/毕设不愁了!

    我这个人没事就喜欢推荐一些好用的 IDEA 插件给大家.这些插件极大程度上提高了我们的生产效率以及编码舒适度. 不知道大家有没有想过自己开发一款 IDEA 插件呢? 我自己想过,但是没去尝试过.刚好有 ...

  5. JMeter中添加dubbo相关插件异常问题解决

    从网上下载了一个dubbo的插件,然后放到JMeter的/lib/ext目录下: 然后启动直接异常 发现启动不了,然后下载了一个全新的JMeter3.2将dubbo插件放到同样的目录,启动,没有问题: ...

  6. 控制 datetimepicker 显示位置

    1. datetimepicker 位置  pickerPosition  有以下几个属性值,望文生义不解释 $('.form_datetime').datetimepicker({ pickerPo ...

  7. Bootstrap中的datetimepicker插件用法总结(转载)

    datetimepicker用法总结   目录 datetimepicker用法总结 目录 简述 官方文档 选项属性 1 format 格式 2 weekStart 一周从哪一天开始 3 startD ...

  8. MacOS VSCode 安装 GO 插件失败问题解决

    0x00 问题重现 Installing golang.org/x/tools/cmd/guru FAILED Installing golang.org/x/tools/cmd/gorename F ...

  9. CefSharp 提示 flash player is out of date 运行此插件 等问题解决办法

    CefSharp 提示 flash player is out of date 或者 需要手动右键点 运行此插件 脚本 等问题解决办法 因为中国版FlashPlayer变得Ad模式之后,只好用旧版本的 ...

随机推荐

  1. 跨域传输信息postMessage

    widnow.postMessage()方法允许安全的跨域传输. Syntax otherWindow.postMessage(message, targetOrigin, [transfer]); ...

  2. 简单快捷地测试 JPush API

    随着 JPush API v3版本的推出,加上之前开放的 Report API,JPush API 逐渐切换为比较好的符合 REST API 的规范,从而也很容易地使用一般的 HTTP/REST 工具 ...

  3. WPF Combo box 获取选择的Tag

    string str1 = ((ComboBoxItem)this.cboBoxRate1553B.Items[this.cboBoxRate1553B.SelectedIndex]).Tag.ToS ...

  4. hdu 6058

    \(f(l,r,k)=\)区间[\(l\),\(r\)]的第k大. \(\sum_{l=1}^{n}{\sum_{r=l}^{n}{f(l,r,k)}}\) 参考题解,claris大佬题解.赛后AC. ...

  5. ubuntu下的google拼音输入法(终结版)

    声明:此文章是从我的51cto博客上搬至于此. Ubuntu下SCIM应该是最好的中文输入法了,它与搜狗差不多,下面介绍它的安装方法: 1)终端输入: sudo apt-get remove scim ...

  6. codevs 3012 线段覆盖4

    传送门 3012 线段覆盖 4  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 黄金 Gold   题目描述 Description 数轴上有n条线段,线段的两端都是整数坐标,坐 ...

  7. No java virtual machine ....

    运行Eclipse提示No java virtual machine   版权声明:本文原创作者:一叶飘舟 作者博客地址:http://blog.csdn.net/jdsjlzx http://blo ...

  8. C++模板之可变模板参数

    可变模板参数---- C++11新特性 可变模板参数(variadic templates)是C++11新增的最强大的特性之一,它对参数进行了高度泛化,它能表示0到任意个数.任意类型的参数 由于可变模 ...

  9. VS2013Z学习java插件

    https://visualstudiogallery.msdn.microsoft.com/bc561769-36ff-4a40-9504-e266e8706f93 Bugs and Feature ...

  10. POJ3273(最大化问题)

    Monthly Expense Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 20603   Accepted: 8101 ...