Bootstrap-datepicker 位于页面的左上角
Posted
技术标签:
【中文标题】Bootstrap-datepicker 位于页面的左上角【英文标题】:Bootstrap-datepicker positioned on the left top corner of the page 【发布时间】:2017-04-08 09:24:08 【问题描述】:我正在使用来自https://github.com/uxsolutions/bootstrap-datepicker 的bootstrap-datepicker
(与twitter-bootstrap 3
)。单击日期input
时,日期选择器弹出窗口会在页面的左上角 中打开,而不是在input
元素附近。
<script type="text/javascript">
$(function()
$('#BirthDate,#passDate,#docDate').datepicker(
format: "mm.dd.yyyy",
startDate: "-100y",
language: "ru",
orientation: "auto",
autoclose: true,
todayHighlight: true,
toggleActive: true,
defaultViewDate: year: 2016, month: 1, day: 1
);
);
</script>
示例:https://abonent.pskovregiongaz.ru/Gro/AskForVDGO
测试于:IE、FireFox。
使用最新的稳定版和 v1.7.0-dev 进行测试。我不知道该怎么办。
更新: html 源代码。
<!-- language: lang-html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js -->
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<!-- http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js -->
<script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
<!-- Datepicker -->
<link rel="Stylesheet" href="/Content/bootstrap-datepicker3.min.css" />
<script type="text/javascript" src="/Scripts/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datepicker.ru.min.js"></script>
</head>
<body>
<form action="/Gro/AskForVDGO" id="form0" method="post">
<div class="form-group">
<label for="BirthDate">Дата рождения</label>
<input class="text-box single-line" id="BirthDate" name="BirthDate" type="text" value="01.01.0001" />
</div>
<p>
<input type="submit" class="btn btn-success btn-lg btn-block" value="Отправить" title="Отправить" /></p>
</form>
<script type="text/javascript">
$(function()
$('#BirthDate').datepicker(
format: "mm.dd.yyyy",
startDate: "-100y",
language: "ru",
orientation: "auto",
autoclose: true,
todayHighlight: true,
toggleActive: true,
defaultViewDate: year: 2016, month: 1, day: 1
);
);
</script>
</body></html>
更新 2:@TechBreak 回答导致页面上的持久数据选择器(加载时打开,未关闭)元素。 Datapicker 保留在输入元素下,并永久显示。更多日期 input
元素 - 目前显示更多日期选择器。
【问题讨论】:
请张贴您的 html 标记 @TechBreak 完成,我已经发布了 你可以试试这些,***.com/questions/27966645/…***.com/questions/30755513/… @Vaibhav ,尝试了此主题的解决方案。没用。 【参考方案1】:在 GitHub (https://github.com/uxsolutions/bootstrap-datepicker/issues/2079) 找到帮助:
这是因为您使用:body margin: 0 auto;
。当前版本计算此保证金值错误。丑陋的修复 - 在'bootstrap-datepicker.js' - >place:
function(): var left = offset.left - appendOffset.left,
替换为:var left = offset.left,
【讨论】:
【参考方案2】:试试这个,
将您的方向从自动更改为向左并在您的 div 上应用日期选择器。
<script type="text/javascript">
$(function()
$('#datepickerEl').datepicker(
format: "mm.dd.yyyy",
startDate: "-100y",
language: "ru",
orientation: "left",
autoclose: true,
todayHighlight: true,
toggleActive: true,
defaultViewDate: year: 2016, month: 1, day: 1
);
);
</script>
而不是,
<div class="form-group">
<label for="BirthDate">Дата рождения</label>
<input class="text-box single-line" id="BirthDate" name="BirthDate" type="text" value="01.01.0001" />
</div>
这样做,
<div class="form-group" id="datepickerEl">
<label for="BirthDate">Дата рождения</label>
<input class="text-box single-line" id="BirthDate" name="BirthDate" type="text" value="01.01.0001" />
</div>
【讨论】:
没用 :( 现在,datapicker 保留在input
元素下,并永久显示。更多日期输入元素 - 目前显示更多日期选择器。参见更新 2 中的图像。【参考方案3】:
添加一个 ID 到:
<div class="form-group">
这样就变成了:
<div class="form-group" id="birthDateContainer">
然后将容器:#birthDateContainer
添加到 datepicker 函数中,使其变为:
$(function()
$('#BirthDate').datepicker(
format: "mm.dd.yyyy",
startDate: "-100y",
language: "ru",
orientation: "auto",
autoclose: true,
todayHighlight: true,
toggleActive: true,
defaultViewDate:
year: 2016,
month: 1,
day: 1
,
container: '#birthDateContainer'
);
);
应该这样做。
【讨论】:
以上是关于Bootstrap-datepicker 位于页面的左上角的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Django 应用程序中使用 bootstrap-datepicker?
如何使用 bootstrap-datepicker 更新多个输入