javascript - Bootstrap Datepicker 出现在模式中的错误位置

Question

我在调用具有日期选择器的模态的页面上有一个按钮。

如果这个按钮在顶部(我不需要滚动页面来点击)，模式打开并且日期选择器正确显示。

但是如果这个按钮在页面的下方(这样我必须滚动页面才能点击)，模式打开并且日期选择器显示不正确。(不确定滚动是否有关系)

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

编辑在单击“联系”按钮以显示包含日期时间选择器的模式之前，我滚动页面的量移动了日期时间选择器工具提示。

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

希望对其他人有帮助!