Bootstrap-datepicker位於頁面的左上角

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答案導致頁面上的持久數據選擇器（在加載時打開，未關閉）元素。 數據選擇器在輸入元素下持續存在，並永久顯示。 更多日期input元素-此刻顯示更多日期選擇器。

Answer 1

在GitHub（ https://github.com/uxsolutions/bootstrap-datepicker/issues/2079 ）中找到幫助：

發生這種情況的原因是：您使用： body{ margin: 0 auto; } body{ margin: 0 auto; } 。 當前版本錯誤地計算了該保證金值。 對其進行難看的修復-在'bootstrap-datepicker.js'->位置：

function(): var left = offset.left - appendOffset.left,

替換為： var left = offset.left,

Answer 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>

Answer 3

將ID添加到：

<div class="form-group">

變成：

<div class="form-group" id="birthDateContainer">

然后將容器： #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'
    });
});

應該這樣做。

Bootstrap-datepicker位於頁面的左上角

問題描述

3 個解決方案

解決方案1
2 已采納 2016-12-07 13:06:23

解決方案2
1 2016-11-24 09:17:28

解決方案3
0 2016-12-01 09:36:28

Bootstrap-datepicker位於頁面的左上角

問題描述

3 個解決方案

解決方案1 2 已采納 2016-12-07 13:06:23

解決方案2 1 2016-11-24 09:17:28

解決方案3 0 2016-12-01 09:36:28

解決方案1
2 已采納 2016-12-07 13:06:23

解決方案2
1 2016-11-24 09:17:28

解決方案3
0 2016-12-01 09:36:28