我有一个带有单元格的 ui-grid，该单元格的模板如下所示:
<!DOCTYPE html>
<div
tooltip={{row.entity[col.field]}}
tooltip-trigger="mouseenter"
tooltip-placement="top"
tooltip-popup-delay="100"
tooltip-append-to-body="true"
>
<input
class="form-control tekstowe"
ng-model="MODEL_COL_FIELD"
options=grid.appScope.calendarOptions["DATE_TABLE"]
date-time-picker
ng-required="true"
pattern="(\d{4})[-\/](\d{2})[-\/](\d{2})"
ng-blur="grid.appScope.refreshOnChange && grid.appScope.isValidDate(MODEL_COL_FIELD) && grid.appScope.updateEntity(row)"
/>
</div>
date-time-picker 是我的自定义指令，它使用指定的选项调用 Bootstrap datetimepicker。目前我使用这套:
format: "YYYY-MM-DD",
language: 'pl',
pickTime: false,
asString: true,
withTime: false
Datepicker 可以工作，但奇怪的是它没有附加到输入字段。它出现在右下角。实际上，它扩大了我的网格，所以我必须向右滚动到底部才能看到它。一切正常，但似乎样式存在某种缺陷。我试图从输入标签中删除类属性 - 没有成功。
有趣的是，当我在 ui-grid 设置中关闭垂直滚动时，一切正常，并且 datetimepicker 显示在正确的位置(在输入字段下方)。
我错过了什么？
最佳答案
我找到了解决方法。如果在 ui-grid 中显示日期选择器，我会重新分配处理 dp.show 事件的位置。这不是一个漂亮的解决方案(实际上非常丑陋)，但它确实有效。
$element
.datetimepicker($scope.options)
.on("dp.show", function(e) {
if ($scope.options.uiGridTable) {
var ele = $(e.target).data('DateTimePicker');
if (ele.widget.position().top > 0) {
ele.widget.css('top', ele.element.position().top + ROW_HEIGHT);
}
if (ele.widget.position().left > 0) {
ele.widget.css('left', ele.element.position().left);
}
}
})
关于css - Bootstrap 日期选择器未附加到输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31748019/