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

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

如果输入的容器没有相对定位，日期时间选择器将显示在错误的位置。

解决办法是：

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

Answer 3

我在使用 Bootstrap 4.1.1 时遇到了同样的问题。日期选择器弹出框出现在输入元素的顶部。

我使用这个 CSS 修复了它：

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

Answer 4

在我的例子中，日期选择器的位置比它应该的高 60px，因为它的 div 父母之一有：

margin-top: 60px;

而不是

padding-top: 60px;

Answer 5

对我来说，以下解决方案有效

var datepicker = sandbox.dom('body').find('.bootstrap-datetimepicker-widget:last'),

position = datepicker.offset();

// Move datepicker to the exact same place it was but attached to the body
datepicker.appendTo('body');
datepicker.css({
    position: 'absolute',
    top: position.top,
    bottom: 'auto',
    left: position.left,
    right: 'auto'
});

Answer 6

对我来说，这个和相关问题原来是因为我打开了代码检查器窗口。普通用户不应该打开这个，所以如果这是你的情况，那不是问题。

Answer 7

这个解决方案非常适合我将日期选择器呈现在引导模式之上。

http://jsfiddle.net/cmpgtuwy/654/

HTML

<br/>
<div class="wrapper">
Some content goes here<br />
Some more content.
<div class="row">
<div class="col-xs-4">

<!-- padding for jsfiddle -->
<div class="input-group date" id="dtp">
<input type="text" class="form-control" />  
<span class="input-group-addon">
  <span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>

Javascript

$('#dtp').datetimepicker({
format: 'MMM D, YYYY',
widgetParent: 'body'});


$('#dtp').on('dp.show', function() {
      var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');
      if (datepicker.hasClass('bottom')) {
        var top = $(this).offset().top + $(this).outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
      else if (datepicker.hasClass('top')) {
        var top = $(this).offset().top - datepicker.outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
    });

CSS

.wrapper {
height: 100px;
overflow: auto;}
body {
position: relative;
}

Answer 8

试试这个，也许不是最优雅的解决方案，但对我来说它有效

  //fixing scroll issue on datepicker
  $(".ui-datepicker-trigger").on("click", function() {
      $("#ui-datepicker-div").css({top: xxx});
  });

Answer 9

试试这个：

$(".yourInputField").on("click", function() {
    var offsetModal = $('#yourModalID').offset().top;
    var offsetInput = $(this).offset().top;
    var inputHeight = $(this).height();
    var customPadding = 17; //custom modal padding (bootstrap modal)! 
    var topDatepicker = (offsetInput + inputHeight + customPadding) - offsetModal;
  $("#ui-datepicker-div").css({top: topDatepicker});
});