Question

我正在尝试在angulart ui bootstrap内使用bootstrap datepicker（来自ng-grid）。

我正在设置网格：

$scope.gridSettings = {
    data: "myData",
    enableCellSelection: true,
    enableRowSelection: false,
    enableCellEditOnFocus: true,
    columnDefs:
        [
            { field: "StartDate", displayName: "Date", 
              editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" ng-model="COL_FIELD" />' }
        ]
};

它有效，当我点击一个单元格时它会变成一个日期选择器 - 但是 - 日历弹出窗口被单元格边界剪切 - 这意味着我只能看到弹出窗口中适合单元格的部分（顶部）边界）

我需要设置什么才能让datepicker弹出窗口显示在网格上方而不是被剪切到单元格？

更新：尝试从Angular UI bootstrap切换到angular-strap，现在datepicker正常工作，但我对timepicker有完全相同的问题

Answer 1

使用datepicker-append-to-body = true

$scope.gridSettings = {
data: "myData",
enableCellSelection: true,
enableRowSelection: false,
enableCellEditOnFocus: true,
columnDefs:
    [
        { field: "StartDate", displayName: "Date", 
          editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" datepicker-append-to-body=true ng-model="COL_FIELD" />' }
    ]

};

Answer 2

我实际上遇到了同样的问题，最终提出了这个解决方案。似乎运作良好。这里的基本思想是挂钩datetimepicker show事件（dp.show），将它从它可能拥有的父项中分离出来，将它附加到body = absolute的主体，并将其位置设置在目标元素的正下方。

请注意，下面的代码来自包装引导日期时间选择器的指令，但只要您可以在选择器元素上获得句柄，相同的解决方案应该适用于任何地方。

希望能帮助某人：）

Provisional headers are shown //THERE IS A WARING SYMBOL ON THIS LINE
Accept:image/webp,image/*,*/*;q=0.8
Origin:http://sending-server.com
Referer:http://sending-server.com/info.html
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36
X-DevTools-Emulate-Network-Conditions-Client-Id:A760326C-C02F-41C6-A4F6-4B46AA7BC1C3

Answer 3

进入ng-grid.css文件并注释掉以下内容：

.ngCell {
  /*overflow: hidden;*/
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: inherit;
}

这对我显示验证消息很有用，对于我的应用程序，我没有看到任何副作用。

Answer 4

对要添加日期选择器的单元格使用以下cellTemplate。：

 dateCellTemplateEdit = '<div class="controls input-append"><input id="valueDt{{row.rowIndex}}" class="datepicker" type="date" value="{{row.entity.valuedtstr}}" style ="font-size:13px; width:60%; " data-date-format="mm-dd-yyyy"  ng-model="row.entity.valuedtstr" readOnly="true"  /><div class="add-on"><i class="icon-calendar" ></i><div>';

Answer 5

用您自己的指令替换editableCellTemplate中的ng-input。

Plunker

该指令中的关键点是ngGridEventEndCellEdit。当datepicker的isOpen设置为false时，你会发出它而不是发出它＆＃34; onBlur＆＃34;

            scope.isOpen = true;

            scope.$watch('isOpen', function (newValue, oldValue) {
                if (newValue == false) {
                    scope.$emit('ngGridEventEndCellEdit');
                }
            });

            angular.element(elm).bind('blur', function () {
                //scope.$emit('ngGridEventEndCellEdit');
            });

相应的editableCellTemplate（注意my-input而不是ng-input）：

 '<input ng-class="\'colt\' + col.index" datepicker-popup="dd.MM.yyyy" datepicker-append-to-body=true is-open="isOpen" ng-model="COL_FIELD" my-input="COL_FIELD"/>';

如何在ng-grid中使用bootstrap datepicker

5 个答案: