Question

我在https://github.com/uxsolutions/bootstrap-datepicker使用if([className IsInternet]){ //Load the page }else{ // Show message internet not available }（bootstrap-datepicker）。点击日期twitter-bootstrap 3时，会在页面的左上角中打开日期选择器弹出窗口，而不是input元素附近。

input

示例：https://abonent.pskovregiongaz.ru/Gro/AskForVDGO

测试：IE，FireFox。

使用最新的stable和v1.7.0-dev进行测试。我不知道该怎么做。

更新： HTML来源。

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

更新2 ：@TechBreak回答导致持久数据贴片（在加载时打开，未关闭）元素在页面上。 Datapicker在输入元素下保留，并永久显示。更多日期 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="../Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />  <script type="text/javascript" src="/Scripts/jquery.min.js"></script>  <script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script> <script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>  <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>元素 - 此时显示更多日期选择器。

Answer 1

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

这是因为您使用：function(): var left = offset.left - appendOffset.left,。当前版本计算此边际值错误。丑陋的修复 - 在＆＃39; bootstrap-datepicker.js＆＃39; - ＆gt;地点：

var left = offset.left,

替换它：foobar

Answer 2

试试这个，

将您的方向从自动更改为左侧，然后在div上应用datepicker。

<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添加到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位于页面的左上角

3 个答案: