Bootstrap-位于页面左上角的日期选择器

Question

我正在使用 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 元素 - 目前显示更多日期选择器。

Answer 1

试试这个，

将您的方向从自动更改为左侧并在 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>

Answer 2

将 ID 添加到：

<div class="form-group">

所以它变成了：

<div class="form-group" id="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'
    });
});

应该这样做。

Answer 3

在 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,

Bootstrap-位于页面左上角的日期选择器

Bootstrap-datepicker positioned on the left top corner of the page

javascript

jquery

twitter-bootstrap

datepicker

bootstrap-datepicker