Bootprap Datepicker появляется в неправильном месте в модальном

У меня есть кнопка на странице, которая вызывает модальный, имеющий datepicker.

Если эта кнопка находится наверху (мне не нужно прокручивать страницу до щелчка), модальный открывается, а датапикер отображается правильно.

Но если эта кнопка ниже на странице (так что мне нужно прокручивать страницу, чтобы щелкнуть), модальный открывается, а datepicker отображается некорректно. (НЕ УВЕРЕН, если прокрутка имеет отношение)

Здесь jsfiddle

Здесь проблема отображения изображения, datepicker должна отображаться выше как всплывающая подсказка, но она опускается:

Здесь код:

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

Ответ 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

Надеюсь, что это поможет кому-то еще!

Ответ 2

Datetimepicker будет отображаться в неправильном месте, если контейнер ввода не расположен относительно.

Решение:

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

Ответ 3

У меня была такая же проблема при использовании его с Bootstrap 4.1.1. Всплывающее окно DatePicker появилось в верхней части элемента ввода.

Я исправил это с помощью этого CSS:

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

Ответ 4

В моем случае позиция datepicker была на 60 пикселей выше, чем следовало бы, потому что у одного из ее родителей div было:

~~margin-top: 60px;~~

вместо

padding-top: 60px;

Ответ 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'
});

Ответ 6

Для меня это и связанные с этим проблемы оказались из-за того, что я открыл окно инспектора кода. У обычных пользователей это не должно быть, поэтому, если это ваш случай, это не проблема.

Ответ 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;
}

Ответ 8

введите описание изображения здесь

date-piker скрывается из-за переполнения таблицы. Сейчас я использую https://www.npmjs.com/package/ng2-datepicker угловой дата-пикер. Я хочу показать дату всплывающего окна. Понравилось это изображение. Пожалуйста, помогите мне, как установить всплывающее окно даты пикера без переполнения. https://i.stack.imgur.com/bKR3C.png

Заранее спасибо. Хорошего дня