Bootstrap Datepicker appearing at incorrect location in a modal

Question

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

Answer 1

In my case the position of the datepicker was 60px higher than it should have been, because one of its div parents had:

margin-top: 60px;

instead of

padding-top: 60px;

Answer 2

This solutions worked perfectly for me to render the datepicker on top of bootstrap modal.

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 3

Datetimepicker will show in a wrong place if the container of the input is not positioned relative.

The solution is:

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

Answer 4

I had the same problem when using it with Bootstrap 4.1.1. The datepicker popover was appeareing on to the top of the input element.

I fixed it using this CSS:

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

Answer 5

For me, this and related issues turned out to be because I had the code inspector window open. Regular users shouldn't have this on, so if that's your case it's a non issue.

Answer 6

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!