Bootstrap Datetime Picker in Backgrid Cell Not Rendering Correctly

Question

I'm trying to use this Bootstrap Datetime Picker (version 4.17.37) inside a Backgrid cell, but I'm having a problem with the way the widget is rendering. The widget appears as a thin popup right below the cell, but seems to have no content inside. However, if you log the widget's inner html to the console, the content is there. It seems to me that there is something unusual going on inside the place function of the datetime picker, shown here.

This is my code for the custom Backgrid cell and its editor.

// 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
});

This produces the following result:

Upon inspection, the element that the datetime picker was using as a parent is an ancestor <div class="col-lg-12 col-md-12">. I then tried to solve the problem by giving the cell a { position: relative } CSS property. That indeed made the datetime picker use the cell as a parent, but produced the following result visually:

You can see that the picker appears to be below the cell, but is not visible.

Playing around with other properties, such as widgetParent and widgetPositioning gave similar results.

It does, but overriding it to have `overflow: visible` produces an effect similar to the first screenshot. That is, the widget appears as a thin bubble below the cell. — Juan Carlos Farah, Feb 14 '16 at 16:49

score 0 · Answer 1 · answered Sep 05 '19 at 16:21

I had same problem.

(I know that this is an old question, but I use backbone/backgrid today. I have a lot of additional issues with angular, vue or react on data grids, I find that this combo is the best, and simplest, until these days).

well, You only must add this after backbone/backgrid css to your th, td containers.

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

I use it in an backbone/backgrid project and it works perfect.

It's incredible, there is and display: none style overrrided, but, for any reason it continues makeing this fail.

I hope this could help some one else.

one capture:

Bootstrap Datetime Picker in Backgrid Cell Not Rendering Correctly

1 Answers1