title: Try to get bootstrap 4 datetimepicker to work in bootstrap modal
body: <p>I'm trying to get the datetimepicker to work in a modal popup but it is not working correctly. When I click on the input field, the date/time picker widget does come up, but it is behind the modal window. If I try and select a different date, the picker closes immediately and does not update the input form.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div class="modal fade" id="historicalModal" tabindex="-1" role="dialog" aria-labelledby="HisModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title" id="HisModalLabel"&gt;Historical Device Tracking&lt;/h4&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="His-modal-body"&gt;
                  &lt;div class="form-check" id="historical_form"&gt;
                      &lt;!--&lt;div class="historical_track"  &gt;&lt;/div&gt;--&gt;
                  &lt;/div&gt;
                  &lt;div class="row" style="padding:20px"&gt;
                      Enter Date/Time Start and Finish to Track
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" class="form-control" id="datetime" placeholder="Select date/time" /&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary" id="start_historical_tracking" data-dismiss="modal"&gt;Start Historical Tracking&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.modal-content --&gt; 
      &lt;/div&gt;
      &lt;!-- /.modal-dialog --&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the js:</p>
  
  <pre><code>$(function () {
    //default date range picker
    $('#daterange').daterangepicker({
        autoApply:true
    });
  
    //date time picker
    $('#datetime').daterangepicker({
        timePicker: true,
        timePickerIncrement: 30,
        locale: {
            format: 'MM/DD/YYYY h:mm A'
        }
    });
  
    //single date
    $('#date').daterangepicker({
        singleDatePicker: true,
    });
  });
  </code></pre>
  
  <p>And here is what I see on the screen:
  <a href="https://i.stack.imgur.com/smQOt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/smQOt.png" alt="enter image description here"></a></p>
  
  <p>All the web tutorials make this seem like such a simple widget. But it has me pulling my hair out.</p>
  
  <p>Any ideas what I'm doing wrong?</p>
  
  <p>Thanks....</p>