Bootstrap Datepicker出现在模态的不正确位置 [英] Bootstrap Datepicker appearing at incorrect location in a modal

问题描述

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

如果此按钮位于顶部（我不必滚动页面点击） ，模式打开和日期显示正确。

但是如果这个按钮在页面上较低（这样我必须滚动页面点击），模态打开和日期显示不正确。
（如果滚动有关系，不确定）

这里是 jsfiddle

这里是图像显示问题，日期提示应该显示为工具提示，但是它下降：
< img src =https://i.stack.imgur.com/SvAcZ.pngalt =enter image description here>

这里是代码：

 < button type =buttonclass =btn btn-dangerdata-toggle =modaldata-target = #callModal>联系人< / button> 
 
< div class =modal fadeid =callModal> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modal>< span aria-hidden =true>& times;< / span>< span class =sr-only> Close< / span>< / button> 
< h4 class =modal-title>模式标题< / h4> 
< / div> 
< div class =modal-body> 
< form role =form> 
< div class =form-group> 
< label for =name> Name< / label> 
< input type =textclass =form-controlid =nameplaceholder =Enter name> 
< / div> 
< div class =form-group> 
< label for =contact>联系人< / label> 
< input type =textclass =form-controlid =contactplaceholder =您的手机号码> 
< / div> 
< div class =row> 
< div class ='col-sm-6'> 
< div class =form-group> 
< label for =cal>日期& amp;时间< / label> 
< div class ='input-group date'id ='datetimepicker1'> 
< input type ='text'class =form-controlid =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 =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< button type =buttonclass =btn btn-danger>联系人< / button> 
< / div> 
< / div><！ -  /.modal-content  - > 
< / div><！ -  /.modal-dialog  - > 
< / div><！ -  /.modal  - > 
 

EDIT
datetimepicker工具提示我滚动页面，然后单击按钮联系人出现包含datetimepicker的模态。

解决方案

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

  $（'＃myDatePicker'）。datepicker（{
 container：'＃myModalId'
} ）; 
  

或如果您正在使用延迟加载方法：

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

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

希望它能帮助别人！

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

EDIT The 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出现在模态的不正确位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！