Bootstrap datetimepicker не работает должным образом внутри прокручиваемого div

Я работаю с bootstrap DateTimePicker, и у меня есть прокручиваемый div, внутри которого я мой выбор времени даты. и там, когда я прокручиваю и пытаюсь выбрать даты, окна выбора даты и времени открываются над текстовым полем

Для лучшей иллюстрации у меня есть изображение здесь

Интересно, где я напортачил?

Это то, что я закодировал.

<script>
    $(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);
        });

    });
</script>

HTML

<div class="form-group datetimepicker-cover">
      <input type="text" name="start_time" id="datetimepicker" required="required" class="form-control" placeholder="From Date" data-name="start_time"/>
</div>
<div class="form-group datetimepicker-cover">
      <input type="text" name="end_time" id="datetimepicker1" required="required" class="form-control" placeholder="To Date" data-name="end_time"/>
 </div>