Bootstrap-datepicker位于页面的左上角
[英]Bootstrap-datepicker positioned on the left top corner of the page
问题描述
I'm using bootstrap-datepicker from https://github.com/uxsolutions/bootstrap-datepicker (with twitter-bootstrap 3 ). 
我正在使用https://github.com/uxsolutions/bootstrap-datepicker的 bootstrap-datepicker （带有twitter-bootstrap 3 ）。 When clicking on the date input , datepicker popup opens in the top left corner of the page, not near the input element. 单击日期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>
Example: https://abonent.pskovregiongaz.ru/Gro/AskForVDGO 例如： https ： //abonent.pskovregiongaz.ru/Gro/AskForVDGO
Tested in: IE, FireFox. 经过测试：IE，FireFox。
Tested with latest stable and v1.7.0-dev. 经过最新的稳定版和v1.7.0-dev测试。 I have no clue, what else to do. 我不知道，还有什么可做的。
UPDATE: HTML source. 更新： 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>
UPDATE 2 : @TechBreak answer lead to persistent datapicker (opened on load, didn't close) element on page. 更新2 ：@TechBreak答案导致页面上的持久数据选择器（在加载时打开，未关闭）元素。 Datapicker persists under input element, and shown permanently. 数据选择器在输入元素下持续存在，并永久显示。 More date input elements - more datepickers shown at moment. 更多日期input元素-此刻显示更多日期选择器。
3 个解决方案
解决方案1
2 已采纳 2016-12-07 13:06:23
Found help at GitHub ( https://github.com/uxsolutions/bootstrap-datepicker/issues/2079 ): 在GitHub（ https://github.com/uxsolutions/bootstrap-datepicker/issues/2079 ）中找到帮助：
It happens because you use: body{ margin: 0 auto; } 发生这种情况的原因是：您使用： body{ margin: 0 auto; } body{ margin: 0 auto; } . body{ margin: 0 auto; } 。 Current version calculate this margin value wrong. 当前版本错误地计算了该保证金值。 ugly fix for it - in 'bootstrap-datepicker.js' - >place: 对其进行难看的修复-在'bootstrap-datepicker.js'->位置：
function(): var left = offset.left - appendOffset.left,
replace it on: var left = offset.left, 替换为： var left = offset.left,
解决方案2
1 2016-11-24 09:17:28
Try this, 尝试这个，
Change your orientation from auto to left and apply datepicker on your div instead. 将方向从自动更改为左，然后在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>
And instead of, 而不是
<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>
Do this, 做这个，
<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>
解决方案3
0 2016-12-01 09:36:28
Add an ID to the: 将ID添加到：
<div class="form-group">
so it becomes: 变成：
<div class="form-group" id="birthDateContainer">
and then add container: #birthDateContainer to the datepicker function so it becomes: 然后将容器： #birthDateContainer添加到#birthDateContainer函数，使其变为：
$(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'
});
});
that should do it. 应该这样做。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.