模态中的datetimepicker问题

Question

我有一些用于搜索的引导模式，其日期为插件https://eonasdan.github.io/bootstrap-datetimepicker/

我的问题是日历弹出窗口留在模态中，所以我必须滚动模态。请参阅附件。

我想在模式上方打开日历，或者，如果无法打开，则自动打开模式的高度。

我的实际配置：

$('#start').datetimepicker({
        locale: 'it',
        format: "DD/MM/YYYY"
    });
    $('#end').datetimepicker({
        locale: 'it',
        format: "DD/MM/YYYY",
        useCurrent: false
    });
    $("#start").on("dp.change", function (e) {
        $('#end').data("DateTimePicker").minDate(e.date);
    });
    $("#end").on("dp.change", function (e) {
        $('#start').data("DateTimePicker").maxDate(e.date);
    });

然后我尝试了：

CSS页面：

body {position:relative;}

脚本：

$('#start').datetimepicker({
        locale: 'it',
        format: "DD/MM/YYYY",
        widgetParent: 'body'
    });
    $('#end').datetimepicker({
        locale: 'it',
        format: "DD/MM/YYYY",
        useCurrent: false
    });
    $("#start").on("dp.change", function (e) {
        $('#end').data("DateTimePicker").minDate(e.date);
    });
    $("#end").on("dp.change", function (e) {
        $('#start').data("DateTimePicker").maxDate(e.date);
    });

    $('#start').on('dp.show', function() {
      var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');
      if (datepicker.hasClass('bottom')) {
        var top = $(this).offset().top + $(this).outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      } else if (datepicker.hasClass('top')) {
        var top = $(this).offset().top - datepicker.outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
    });

我的意图得到了更好的结果。

如何在模式上方显示日历？还是有更好的方法来解决这个问题？