Search code examples
twitter-bootstraptwitter-bootstrap-3bootstrap-modalbootstrap-datetimepicker

Bootstrap Datetimepicker Display Issue in Popup Modal

Bootstrap Datetimepicker Version - 4.15.35

I have a bootstrap datetimepicker in a modal form. It's working fine if it's at the top or middle of the modal window. If I place it at the bottom, the datetime picker open at the very top of the screen instead of below or next to the container.

I add widgetParent option to it; it does not display the datetime control window now. I change the added a z-index of 999999, and it's still not displaying it. 

$('#StartDate').datetimepicker({
            useCurrent: false,
            format: 'MM/DD/YYYY hh:mm',
            widgetParent: '#StartDate',
            debug:true
        })

.bootstrap-datetimepicker-widget.dropdown-menu{
    z-index:99999999;
}

Here are two partial html codes generated for the same container except the location is changed.

When the control is placed at the top or middle of the modal page:

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour 
bottom" style="display: block; top: 125px; bottom: auto; left: 165px; right: auto;">

When the control is placed at the bottom of the modal page. It's almost the end of the modal, but there is enough space to display the control.

<div class="bootstrap-datetimepicker-widget dropdown-menu top" 
style="display: block; top: auto; bottom: 543px; left: 165px; 
right: auto;"><ul class="list-unstyled">
Solution

  • There were several solutions online, but they were not working for me. I had position relative added to the control's outer div. In addition, I had the widgetParent set to the control id. I played around with them and deleted my cache after every try. Finally, I removed the widgetParent option and added the position:relative to the outer div, and it works.

    //input

        <div class="form-group" style="position:relative;">
      <label for="StartDate" class="sr-only">Start Date</label>
     <input type="text" name="StartDate" id="StartDate" class="form-control">
   </div>

$('#StartDate').datetimepicker({
            useCurrent: false,
            format: 'MM/DD/YYYY hh:mm',
            debug:true
        })