Question

我有一个带有一个单元格的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有效，但奇怪的是它没有附加到输入字段。它出现在右下角。实际上，它会扩大我的网格，所以我必须向右滚动才能看到它。一切正常，但似乎造型有点瑕疵。我试图从输入标签中删除class属性 - 没有成功。

有趣的是，当我在ui-grid设置中关闭垂直滚动时，一切正常，并且datetimepicker显示在正确的位置（在输入字段下方）。

我错过了什么？

Answer 1

我找到了一个解决方法。如果在ui-grid中显示datepicker，我会重新分配位置处理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);
                        }
                    }
                })

Bootstrap datepicker未附加到输入字段

1 个答案: