Bootstrap 日期选择器出现在模式中的错误位置

Question

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

如果此按钮位于顶部（我不必滚动页面即可单击），模式将打开并且日期选择器会正确显示。

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

这里是图像显示问题，日期选择器应该作为工具提示显示在上方，但它出现了：

代码如下：

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

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

Answer 1

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

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

或者如果您像我一样使用 "lazy load" 方法：

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

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

希望对其他人有所帮助！

Answer 2

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

Answer 3

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

解决方法是：

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

Answer 4

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

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

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

我用这个CSS修复了它：

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

Answer 7

这个解决方案非常适合我在 bootstrap 模态上呈现日期选择器。

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});
});

Bootstrap 日期选择器出现在模式中的错误位置

Bootstrap Datepicker appearing at incorrect location in a modal

html

javascript

css

datepicker

twitter-bootstrap