title: Bootstrap datetimepicker not working properly inside scrollable div
body: <p>I'm working with <a href="https://eonasdan.github.io/bootstrap-datetimepicker/" rel="nofollow noreferrer">bootstrap DateTimePicker</a> and there I have a scrollable div and inside which I have my date time picker. and there when I scroll and tries to select dates the date time picker windows opens above the textbox</p>
  
  <p>For better illustration I have the image here<a href="https://i.stack.imgur.com/FrtNQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FrtNQ.png" alt="enter image description here"></a> </p>
  
  <p>Wonder where I messed up with it?</p>
  
  <p>This is what I have coded.</p>
  
  <pre><code>&lt;script&gt;
      $(function () {
          $('#datetimepicker').datetimepicker({
              minDate:new Date()
            });
          $('#datetimepicker1').datetimepicker({
              useCurrent: false
          });
          $("#datetimepicker").on("dp.change", function (e) {
              $('#datetimepicker1').data("DateTimePicker").minDate(e.date);
          });
          $("#datetimepicker1").on("dp.change", function (e) {
              $('#datetimepicker').data("DateTimePicker").maxDate(e.date);
          });
  
  
          $('#radius').bootstrapSlider({
              formatter: function (value) {
                  $('#distance').val(value);
                  var v = $('#btn-toggle').find('.active').find('input[name="options"]').val();
                  console.log('option = ' + v);
                  //alert(v);
                  radius = $('#radius').val();
                  if (v == 'km') {
                      $('#distance').val(radius);
                  }
                  else {
                      $('#distance').val(radius * 1000);
                  }
                  return value;
              }
          });
  
          $('#btn-toggle').click(function () {
  
              setTimeout(function () {
                  var v = $('#btn-toggle').find('.active').find('input[name="options"]').val();
  
                  //alert(v);
  
                  radius = $('#radius').val();
                  if (v == 'km') {
                      $('#distance').val(radius);
                  }
                  else {
                      $('#distance').val(radius * 1000);
                  }
              }, 500);
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="form-group datetimepicker-cover"&gt;
        &lt;input type="text" name="start_time" id="datetimepicker" required="required" class="form-control" placeholder="From Date" data-name="start_time"/&gt;
  &lt;/div&gt;
  &lt;div class="form-group datetimepicker-cover"&gt;
        &lt;input type="text" name="end_time" id="datetimepicker1" required="required" class="form-control" placeholder="To Date" data-name="end_time"/&gt;
   &lt;/div&gt;
  </code></pre>