Bootstrap Datepicker appearing at incorrect location in a modal

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!

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>

Related