bootstrap-datetimepicker 时间控件位置问题

最新推荐文章于 2025-09-20 01:59:59 发布

转载最新推荐文章于 2025-09-20 01:59:59 发布 · 3.6k 阅读

文章标签：

#datepick #bootstrap #scroll

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个关于bootstrap-datetimepicker组件的问题解决方案。当页面出现滚动时，该组件显示的时间选择器会出现位置偏移。文章详细说明了如何通过修改源代码中的定位逻辑来解决这一问题。

原文在
https://github.com/smalot/bootstrap-datetimepicker/commit/2e9c1978346a4846d580659d50710663960e75cb

当屏幕出现滚动时，弹出时间选择控件会出现位置错误的问题需要修改bootstrap-datetimepicker.js 大约500多行的位置

top = top - containerOffset.top;
left = left - containerOffset.left;
if( !elementOrParentIsFixed(this.element) ){
      top = top + document.body.scrollTop;
}

if语句改为：

if(this.container != 'body') top = top + document.body.scrollTop

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

混沌cc

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决bootstrap datetimepicker 位置错误

03-28

解决bootstrap datetimepicker 位置错误

bootstrap-datetimepicker时间控件

07-02

Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间选择插件，它提供了用户友好的界面，使得在Web应用中添加日期和时间选择功能变得极其简单。这个插件不仅支持日期选择，还支持时间选择，甚至可以同时选择日期...

参与评论您还未登录，请先登录后发表或查看评论

datetimepicker bootstrap的时间插件显示位置问题及其他配置

weixin_33964094的博客

06-05

2888

位置问题：在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的，但是遇到输入框在屏幕最下面时，日期选择框会有一部分在屏幕下面，显示不了，因此需要能够从上面弹出。可以在初始化时： $('.form_date').datetimepicker({ language: 'zh-CN', ...

响应式日期选择器：bootstrap-datepicker弹性布局全解析

最新发布

gitblog_00394的博客

09-20

258

你是否经历过这样的场景：精心设计的Web表单在桌面端完美运行，但在手机上点击日期选择器时，日历却错位到屏幕外？或者在平板设备上，日期选择器要么小到看不清，要么大到破坏整体布局？根据Bootstrap官方issue统计，**响应式日期选择器**已成为前端开发第三大常见兼容性问题，尤其在金融、酒店预订等强交互场景中，错误的日期选择体验直接导致用户转化率下降40%。本文将系统讲解bootstrap-...

控制 datetimepicker 显示位置

weixin_33859504的博客

12-25

2909

1.datetimepicker 位置pickerPosition有以下几个属性值，望文生义不解释 $('.form_datetime').datetimepicker({ pickerPosition: 'botom-left', pickerPosition: 'bottom-right', pickerPosition: 'top-left',...

时间选择控制 datetimepicker 显示位置

qq_43052559的博客

09-06

1313

datetimepicker 位置 pickerPosition 有以下几个属性值，望文生义不解释 $(’.form_datetime’).datetimepicker({ pickerPosition: ‘botom-left’, pickerPosition: ‘bottom-right’, pickerPosition: ‘top-left’, pickerPosition: ‘to...

datetimepicker 插件位置问题解决经验

weixin_30689307的博客

05-12

535

使用dadetimepicker进行时间选择是个很不错的选择，但是美中不足的是该插件在chrome中显示弹框的时候有时会出现位置错位的现象，而在IE中则没有这种现象，视图如图1 图1 查阅了网上的资料说这是插件的一个bug，需要修改bootstrap-datetimepicker.js插件中的源码才能够解决这个问题。https://github.com/smalot...

bootstrap-datetimepicker-简单好用的日历时间插件

04-10

bootstrap-datetimepicker是一个简单好用的日历时间插件，在bootstrap首页上也有推荐。使用起来也很简单： 1，必须引入Jquery文件。 2，引入日历插件JS代码：bootstrap-datetimepicker.min.js 3，如果需要使用非英文...

bootstrap-datetimepicker时间组件

08-19

Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件，它提供了美观、易用的用户界面，用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本，确保了与不同Bootstrap设计...

bootstrap-datetimepicker日期控件js及css文件

03-29

Bootstrap-Datetimepicker是一款基于Bootstrap框架的日期和时间选择插件，它为网页应用程序提供美观、易用的日历组件。这个压缩包包含该插件运行所需的JavaScript（js）和样式表（css）文件，使得开发者能够方便地在...

Bootstrap-datetimepicker年月日时分秒均可选择

11-22

Bootstrap-datetimepicker是一款基于Bootstrap框架的日期时间选择插件，它允许用户方便地选择精确到秒的时间和日期。这个插件极大地增强了Bootstrap原有基础组件的功能，使得开发者在构建交互式Web应用时，能够提供...

bootstrap datetimepicker定位不准确问题

竹音林的专栏

11-30

4156

1、先到http://www.bootcdn.cn/bootstrap-datetimepicker/下载bootstrap-datetimepicker.min.js （这个已经被压缩，需要重新格式化，可以到http://tool.chinaz.com/Tools/JsFormat.aspx进行格式化） 2、搜索”scrollTop“，找到+ document.body.scrollTop

bootstrap-datepicker控件的使用及修改位置错误问题

weixin_43727933的博客

05-26

3412

bootstrap-datepicker控件的使用及修改位置错误问题一、html自带的时间日期控件 html自带位时间日期控件，却没有format属性，它的显示格式是：“yyyy/mm/dd”有时候我们需要时间日期格式为“yyyy-mm-dd"，虽然HTML5中INPUT类型支持date并没有规定日历弹出框的实现和样式。所以，各浏览器根据自己的设计实现日历。对于日期格式也只有一种，这对于数据库输入有要求"yyyy-mm-dd"就无能为力了。在Input类型获得时间日期控件也非常简单只需输入date就可以显

bootstrap datetimepicker 位置错误