bootstrap-datepicker 位置错误问题

最新推荐文章于 2024-03-26 16:20:30 发布
原创 最新推荐文章于 2024-03-26 16:20:30 发布 · 5.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #datetime #位置错误 #日历

本文介绍了一个关于bootstrap-datepicker插件的问题——日历框显示位置不正确，并提供了详细的解决方案。通过修改“bootstrap-datetimepicker.js”文件中特定行的代码，可以成功调整日历框的位置。 
bootstrap-datepicker 是个不错的时间插件，最近在用的时候却出现了点问题：日历框的位置不对。

一、 问题描述

提示框位置错误

二、解决方案

经过摸索，终于找到了解决方法，找到“bootstrap-datetimepicker.js”（不是压缩版）

bootstrap-datetimepicker 原代码

注意575 行代码，将575，576行代码改为如下：

修改后的代码

三、结果显示

修改后的结果

解决bootstrap datetimepicker 位置错误
03-28
解决bootstrap datetimepicker 位置错误
bootstrap datetimepicker控件位置异常的解决方法
08-28
主要为大家详细介绍了bootstrap datetimepicker控件位置异常的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap datetimepicker 位置错误
热门推荐
小鹰信息技术服务部
01-26 2万+
今天在系统里增加一个时间选择框，用的bootstrap的datetimepicker，bootstrap的版本是3.X，调试的时候发现时间选择框能正常弹出来，但是位置不对，跑到页面的底部去了： 怎么调整呢？试了很多办法都不起作用，初步判定是因为css和js插件的版本问题造成的，因为在bootstrap 2.X 里面的时间框是正常的。不过查了很多方法，试来试去还是没
bootstrap-datepicker控件的使用及修改位置错误问题
weixin_43727933的博客
05-26 3420
bootstrap-datepicker控件的使用及修改位置错误问题 一、html自带的时间日期控件 html自带位时间日期控件，却没有format属性，它的显示格式是：“yyyy/mm/dd”有时候我们需要时间日期格式为“yyyy-mm-dd"，虽然HTML5中INPUT类型支持date并没有规定日历弹出框的实现和样式。所以，各浏览器根据自己的设计实现日历。对于日期格式也只有一种，这对于数据库输入有要求"yyyy-mm-dd"就无能为力了。在Input类型获得时间日期控件也非常简单只需输入date就可以显
bootstrap-datetimepicker时间组件
08-19
Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择组件，它提供了美观、易用的用户界面，用于在网页上方便地选择日期和时间。该组件适用于Bootstrap的2、3、4三个主要版本，确保了与不同Bootstrap设计...
bootstrap-datepicker.js:393 Uncaught TypeError: Cannot read properties of undefined (reading 'split') at Object.parseDate (bootstrap-datepicker.js:393:21) at Datepicker.update (bootstrap-datepicker.js:161:25) at new Datepicker (bootstrap-datepicker.js:84:8) at HTMLTableCellElement.<anonymous> (bootstrap-datepicker.js:341:38) at Function.each (jquery-1.9.1.js:648:23) at init.each (jquery-1.9.1.js:270:17) at $.fn.datepicker (bootstrap-datepicker.js:336:15) at initDatepicker (add-processed-order/:108:25) at HTMLTableCellElement.<anonymous> (add-processed-order/:195:25) at Function.each (jquery-1.9.1.js:648:23)
09-30
`Uncaught TypeError: Cannot read properties of undefined (reading 'split')` 错误通常在 `bootstrap-datepicker.js` 尝试对 `undefined` 对象调用 `split` 方法时出现，可能由日期格式设置、日期值为空或插件...
GET /create.html?title=%E9%B2%81%E6%B3%BD%E6%94%BF&time=2332&type=-1&account=322&remarks=2323223 304 5.093 ms - - GET /css/bootstrap.css 404 3.471 ms - 33 GET /css/bootstrap-datepicker.css 404 3.850 ms - 33 GET /js/jquery.min.js 404 0.802 ms - 33 GET /js/bootstrap.min.js 404 1.151 ms - 33 GET /js/bootstrap-datepicker.min.js 404 0.724 ms - 33 GET /js/bootstrap-datepicker.zh-CN.min.js 404 1.541 ms - 33 GET /create.html 304 0.712 ms - - GET /css/bootstrap.css 404 1.345 ms - 33 GET /css/bootstrap-datepicker.css 404 1.810 ms - 33 GET /js/jquery.min.js 404 1.178 ms - 33 GET /js/bootstrap.min.js 404 1.669 ms - 33 GET /js/bootstrap-datepicker.min.js 404 2.005 ms - 33 GET /js/bootstrap-datepicker.zh-CN.min.js 404 2.442 ms - 33 GET /create.html?title=%E9%B2%81%E6%B3%BD%E6%94%BF&time=2025-09-01&type=1&account=12321&remarks=25P9080108015%E7%89%A9%E8%81%94%E7%BD%91%E5%B7%A5%E7%A8%8B%E4%B8%80%E7%8F%AD 200 1.746 ms - 2651 GET /css/bootstrap.css 404 1.416 ms - 33 GET /css/bootstrap-datepicker.css 404 1.710 ms - 33 GET /js/jquery.min.js 404 1.034 ms - 33 GET /js/bootstrap.min.js 404 1.389 ms - 33 GET /js/bootstrap-datepicker.min.js 404 2.013 ms - 33 GET /js/bootstrap-datepicker.zh-CN.min.js 404 2.419 ms - 33
最新发布
12-20
你提供的日志非常重要，我们来 **逐条分析并定位问题**。...| `bootstrap-datepicker.zh-CN.min.js` | [https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js]...
2bootstrap-datepicker.js:393 Uncaught TypeError: Cannot read properties of undefined (reading 'split') at Object.parseDate (bootstrap-datepicker.js:393:21) at Datepicker.update (bootstrap-datepicker.js:161:25) at new Datepicker (bootstrap-datepicker.js:84:8) at HTMLTableCellElement.<anonymous> (bootstrap-datepicker.js:341:38) at Function.each (jquery-1.9.1.js:648:23) at init.each (jquery-1.9.1.js:270:17) at $.fn.datepicker (bootstrap-datepicker.js:336:15) at HTMLTableRowElement.<anonymous> (add-processed-order/:189:52) at Function.each (jquery-1.9.1.js:648:23) at init.each (jquery-1.9.1.js:270:17) add-processed-order/:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
09-30
在使用 `bootstrap-datepicker` 时，可能是传递给日期选择器的日期格式或日期值未正确定义。 #### 检查日期格式 确保传递给 `datepicker` 的日期格式是正确的。例如： ```javascript $('.datepicker').datepicker({...
bootstrap日期时间选择器datetimepicker 插件位置错乱解决
FM黎明之前的博客
10-27 1733
Date time picker下载 问题：该插件在浏览器中显示选择弹框候与表单位置错乱不对应 解决方案： Bootstrap3/4与datatimepicker版本不兼容的问题导致 修改源码，找到bootstrap-datatimepicker.js 。 用你的编译器搜索找到这句话（我的是在634-636行，可能参数不一样，可搜索唯一关键词）： if (left + 220 > document.body.clientWidth) { left = document.body.clientWidt
datetimepicker 插件位置问题解决经验
xuan2717的博客
06-08 229
datetimepicker 插件位置问题解决经验
el-date-picker显示位置出错
lunarych的博客
01-19 6362
问题描述： 页面使用el-date-picker后，弹出的时间选择框位置问题，无法相对定位。如下图： 解决方案： el-date-picker中添加:append-to-body="false"即可解决 <el-date-picker v-show="radiodate == '自定义'" :append-to-body="false" v-model="pickedDateTime"
Element UI中日期选择日（date-picker）等其他选择器下拉显示错位、位置错误解决
派大夏的博客
03-26 2191
Element UI中日期选择日（date-picker）等其他选择器下拉显示错位、位置错误解决
datepicker设置插件显示位置
johnhuster的专栏
10-18 1万+
datepicker设置插件显示位置
如何解决datepicker时间选择器在模态框中错位的问题（同时应用了markdown编辑器时）
Brandonn_Xu的博客
09-18 325
今天在遇到这么一个问题：我在模态框中同时应用了markdown编辑器与datepicker时间选择器，但是每次在点击时间输入框时，markdown编辑器总是会被重新加载，导致模态框跳转回最顶部，因此时间选择框与输入框就处在了分离的位置：我原本的方法是在button标签属性中实现与模态框的绑定，而在模态框显示时，使用回调函数来执行markdown的初始化函数（因为如果在加载页面时就初始化markdown，则会出现无法输入文字的情况）。代码如下： 此处尝试过将datepicker初始化过程封装成函数，与in
BootStrap-datetimepicker插件有滚动条时出现位移问题解决方案
weixin_30919429的博客
03-10 279
js文件中注释掉以下内容(已注释的部分)(通常min文件用的比较多)对应minJs文件中的内容,红框内容注释注:版本不同,可能有误差,思路也是基本如此.来自为知笔记(Wiz) 转载于:https://www.cnblogs.com/funn0812/p/5261914.html...
【点滴】-jquery.ui.datepicker指定任意位置显示
khan_liu的专栏
09-30 454
jquery.ui.datepicker指定任意位置显示
bootstrap-datetimepicker有滚动条时位置偏移解决办法
bluelotos893的博客
07-01 572
如上图所示，页面有滚动条时bootstrap-datetimepicker选择控件位置偏移，关键代码： 将源码中636行place方法中的left计算注释掉即可。
bootstrap datetimepicker定位不准确问题
竹音林的专栏
11-30 4157
1、 先到http://www.bootcdn.cn/bootstrap-datetimepicker/下载bootstrap-datetimepicker.min.js （这个已经被压缩，需要重新格式化，可以到http://tool.chinaz.com/Tools/JsFormat.aspx进行格式化） 2、搜索”scrollTop“，找到+ document.body.scrollTop
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冲上云霄的Jayden

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值