Bootstrap datetimepicker 在 scrollable 中无法正常工作 div

Question

我正在使用 bootstrap DateTimePicker，我有一个可滚动的 div，里面有我的日期时间选择器。当我滚动并尝试 select 日期时，日期时间选择器 windows 在文本框上方打开

为了更好地说明，我在此处提供了图片

想知道我在哪里搞砸了吗？

这是我编码的。

<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 class

.bootstrap-datetimepicker-widget {
  top: auto !important;
  bottom:auto !important;
}

我想我的问题是它没有足够的 space 来弹出 即使在添加上面的修复后 所以当我改变顺序时现有问题已通过上述修复得到解决。

希望这会对某人有所帮助。 :)

Bootstrap datetimepicker 在 scrollable 中无法正常工作 div

Bootstrap datetimepicker not working properly inside scrollable div

jquery

html

css

twitter-bootstrap

eonasdan-datetimepicker

HTML