Bootstrap-datepicker 位于页面的左上角答案

【问题标题】：Bootstrap-datepicker positioned on the left top corner of the pageBootstrap-datepicker 位于页面的左上角
【发布时间】：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 完成，我已经发布了
你可以试试这些，stackoverflow.com/questions/27966645/…stackoverflow.com/questions/30755513/…
@Vaibhav ，尝试了此主题的解决方案。没用。

标签： javascript jquery twitter-bootstrap datepicker bootstrap-datepicker

【解决方案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'
    });
});

应该这样做。

【讨论】：