Bootstrap Datepicker出现在模态中的错误位置

Question

我在页面上有一个按钮,调用具有datepicker的模态.

如果此按钮位于顶部(我不必滚动页面以单击),模式打开并且datepicker正确显示.

但是如果页面上的此按钮较低(因此我必须滚动页面才能单击),模式打开并且datepicker显示不正确.(不确定滚动是否有关系)

这是jsfiddle

这是图像显示问题,日期选择器应在上面显示为工具提示,但它会下降:

这是代码:

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#callModal">Contact</button>

<div class="modal fade" id="callModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <form role="form">
                <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" class="form-control" id="name" placeholder="Enter name">
                </div>
                <div class="form-group">
                  <label for="contact">Contact</label>
                  <input type="text" class="form-control" id="contact" placeholder="Your mobile number">
                </div>
                <div class="row">
                  <div class='col-sm-6'>
                    <div class="form-group">
                      <label for="cal">Date &amp; Time</label>
                      <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" id="cal"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                      </span>
                    </div>
                  </div>
                   <script type="text/javascript">
                $(function () {
                  $('#datetimepicker1').datetimepicker();
                });
              </script>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-danger">Contact </button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

编辑 datetimepicker工具提示移动了我滚动页面的数量,然后单击"联系人"按钮以显示包含datetimepicker的模式.

Answer 1

我刚遇到同样的问题.我能够通过向div添加容器属性来解决它.

$('#myDatePicker').datepicker({
  container:'#myModalId'
});

或者如果你像我一样使用"延迟加载"方法:

<input id='myDatePicker' data-provide='datepicker' data-date-container='#myModalId'>

参考:http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

希望它可以帮助别人!

Answer 2

如果输入的容器没有相对定位,则Datetimepicker将显示在错误的位置.

解决方案是:

<div style="position:relative">
<div class='input-group date' id='datetimepicker1'>
</div>

Answer 3

使用Bootstrap 4.1.1时遇到了同样的问题.datepicker popover出现在input元素的顶部.

我使用这个CSS修复它:

/* fix bootstrap-datepicker positional bug */
.datepicker {
  transform: translate(0, 3.1em);
}