Backgrid单元格中的引导日期时间选择器未正确呈现答案

【问题标题】：Bootstrap Datetime Picker in Backgrid Cell Not Rendering CorrectlyBackgrid单元格中的引导日期时间选择器未正确呈现
【发布时间】：2026-01-16 11:15:02
【问题描述】：

我正在尝试在 Backgrid 单元格内使用 this Bootstrap Datetime Picker（版本 4.17.37），但我遇到了小部件呈现方式的问题。该小部件显示为单元格正下方的薄弹出窗口，但内部似乎没有内容。但是，如果您将小部件的内部 html 记录到控制台，则内容就在那里。在我看来，日期时间选择器的place 函数内部发生了一些不寻常的事情，显示为here。

这是我的自定义 Backgrid 单元格及其编辑器的代码。

// Editor for the datetime picker cell.
var DatetimePickerCellEditor = Backgrid.InputCellEditor.extend({
    events: {},
    initialize: function() {
        Backgrid.InputCellEditor.prototype.initialize.apply(this, arguments);
        var input = this;

        var timezone = 'America/Lima',
            format = 'YYYY-MM-DD HH:mm';

        this.$el.datetimepicker({
            format: format,
            timeZone: timezone
        }).on('dp.show', function(event) {
            event.preventDefault();
            var column = input.column.get('name'),
                date = input.model.get(column);
            input.$el.data("DateTimePicker").date(date);
        }).on('dp.hide', function(event) {
            event.preventDefault();
            var dateObj = event.date,
                dateLocal = null;

            if (dateObj) {
                var dateString = dateObj.format(format);
                dateLocal = moment.tz(dateString, timezone);
            }

            var command = new Backgrid.Command({}),
                column = input.column.get("name");

            // Save date in model as string in local time.
            input.model.set(column, dateLocal.format());
            input.model.trigger("backgrid:edited",
                                input.model,
                                input.column,
                                command);
            command = input = null;
        }).on('dp.error', function(error) {
            console.log(error)
        });
    }
});

// Cell to display the datetime picker.
var DatetimePickerCell = Backgrid.Cell.extend({
    editor: DatetimePickerCellEditor
});

这会产生以下结果：

经检查，日期时间选择器用作父元素的元素是祖先 <div class="col-lg-12 col-md-12">。然后我尝试通过给单元格一个{ position: relative } CSS 属性来解决这个问题。这确实使日期时间选择器将单元格用作父单元，但在视觉上产生了以下结果：

您可以看到选择器似乎在单元格下方，但不可见。

使用其他属性（例如 widgetParent 和 widgetPositioning）得到了类似的结果。

【问题讨论】：

有问题的单元格是否有overflow:hidden？
确实如此，但是覆盖它以具有overflow: visible 会产生类似于第一个屏幕截图的效果。也就是说，小部件在单元格下方显示为一个细气泡。

标签： backbone.js bootstrap-datetimepicker backgrid

【解决方案1】：

我有同样的问题。

（我知道这是一个老问题，但我今天使用主干/backgrid。我有很多关于角度、vue 或对数据网格做出反应的其他问题，我发现这个组合是最好的，也是最简单的，直到现在）。

好吧，您只需在主干/backgrid css 之后将其添加到您的 th、td 容器中。

.backgrid th,
.backgrid td {
  display: table-cell;
  position: relative; 
  overflow: visible;
}

我在骨干网/backgrid 项目中使用它，效果很好。

令人难以置信，有并且显示：没有样式被覆盖，但是，出于任何原因，它继续使这个失败。

我希望这可以帮助其他人。

一次捕获：

【讨论】：