如何在ng-grid中使用bootstrap datepicker

Question

我正在尝试在ng-grid中使用bootstrap datepicker(通过angulart ui bootstrap).

我正在设置网格:

$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

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

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

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