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

问题描述

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

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

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

这是

希望能帮到别人！

I have a button on a page that calls a modal having datepicker.

If this button is at top (I don't have to scroll page to click), modal opens and datepicker displays correctly.

But if this button is lower on the page( so that I have to scroll page to click), modal opens and datepicker displays incorrect.(NOT SURE if scrolling has a relation)

Here's the jsfiddle

Here's the image displaying problem, the datepicker should display above as a tooltip, but it goes down :

Here's the code :

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

EDITThe datetimepicker tooltip is shifted by the amount by which I scroll the page before clicking the button "Contact" to appear the modal containing the datetimepicker.

解决方案

I just ran into this same issue. I was able to solve it by adding a container attribute to the div.

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

or if you are using the "lazy load" method as I was:

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

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

Hope it helps someone else!

这篇关于Bootstrap Datepicker 出现在模态中的错误位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！