我正在尝试使用this Bootstrap Datetime Picker(版本4.17.37),但是我对小部件的呈现方式有问题。小部件在单元格的正下方显示为一个细的弹出窗口,但是里面似乎没有内容。但是,如果您将小部件的内部html记录到控制台,在我看来,日期时间选择器的place
函数内部似乎发生了一些不寻常的事情,如下所示。
这是我为自定义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
)也得到了类似的结果。
1条答案
按热度按时间snvhrwxg1#
我也有同样问题
(我知道这是一个老问题,但我今天使用 Backbone /backgrid。我有很多额外的问题与Angular ,vue或React上的数据网格,我发现这个组合是最好的,最简单的,直到这些天)。
那么,您只需要在您的th,td容器的backbone/backgrid css之后添加这个。
我在一个 Backbone /backgrid项目中使用它,它工作得很完美。
这简直不可思议,还有和显示器:没有样式被覆盖,但是,由于任何原因,它继续使此失败。
我希望这能帮助到其他人。
一个捕获: