Bootstrap datetimepicker在可滚动div中无法正常工作

Question

我正在使用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>

Answer 1

通过更改顺序修复此问题，并需要像这样修改.bootstrap-datetimepicker-widget { top: auto !important; bottom:auto !important; } 类

printThis.println(r.toString());

我猜我的问题是我没有足够的空间弹出即使添加了上面的修复所以当我改变顺序时，现有的问题由上面的修复修复了。

希望这会对某人有所帮助。 ：）