引导日期选择器未附加到输入字段答案

【问题标题】：Bootstrap datepicker is not attached to input field引导日期选择器未附加到输入字段
【发布时间】：2015-08-03 16:35:38
【问题描述】：

我有一个 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 是我的自定义指令，它使用指定的选项调用引导程序 datetimepicker。目前我用的是这套：

            format: "YYYY-MM-DD",
            language: 'pl',
            pickTime: false,
            asString: true,
            withTime: false

Datepicker 工作，但奇怪的是它没有附加到输入文件。它出现在右下角。实际上，它扩大了我的网格，所以我必须向右滚动到底部才能看到它。一切正常，但似乎样式存在某种缺陷。我试图从输入标签中删除类属性 - 没有成功。

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

我错过了什么？

【问题讨论】：

你能用这个做一个plnkr吗...

标签： css angularjs twitter-bootstrap styling angular-ui-grid

【解决方案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);
                        }
                    }
                })

【讨论】：