Angularjs 如何在ng网格中使用引导数据采集器

我正在尝试在一个数据库中使用引导日期选择器（via）

我正在使用以下设置网格：

$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" />' }
        ]
};

$scope.gridSettings={
数据：“myData”，
enableCellSelection:true，
enableRowSelection:false，
enableCellEditOnFocus:true，
columnDefs：
[
{字段：“开始日期”，显示名称：“日期”，
editableCellTemplate:''}
]
};

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

我需要设置什么来允许datepicker弹出窗口显示在网格上方，而不是被裁剪到单元格中

---

更新：尝试从Angular UI引导切换到Angular strap，现在datepicker可以工作了，但我遇到了与时间选择器完全相同的问题进入ng-grid.css文件并注释掉以下内容：

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

---

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

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

 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>';

dateCellTemplateEdit=''；

使用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" />' }
    ]

$scope.gridSettings={
数据：“myData”，
enableCellSelection:true，
enableRowSelection:false，
enableCellEditOnFocus:true，
columnDefs：
[
{字段：“开始日期”，显示名称：“日期”，
editableCellTemplate:''}
]

---

})

用您自己的指令替换editableCellTemplate中的ng输入

该指令中的关键点是ngGridEventEndCellEdit。当datepicker的等参线设置为false时，您将发射它，而不是“onBlur”：

            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（注意我的输入而不是ng输入）：

”；

事实上，我也遇到了同样的问题，并最终提出了这个解决方案。看来效果不错。这里的基本思想是钩住datetimepicker show事件（），将其从它可能具有的父级分离，使用position=absolute将其附加到主体，并将其位置设置在目标元素的正下方

请注意，下面的代码取自包装引导datetimepicker的指令，但是，只要可以在picker元素上获得句柄，同样的解决方案应该适用于任何地方

希望对某人有所帮助：）

---

这会使水平滚动条覆盖网格的最后一行，并且在选择日期后，时间选择器弹出窗口（请参阅问题“为什么时间选择器而不是日期选择器”中的更新）仍然被单元格剪裁。。。是否更改为正常标签控件。。。这意味着更改为默认的cellTemplate…谢谢！正如网站所说，我无法通过datepicker选项对象使其工作。获取错误：[ngModel:NonaAssign]表达式“grid.getCellValue（row，col）”是不可赋值的。元素：在意大利，在纪念碑上说！非常感谢，伙计：）

 '<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"/>';

function link ($scope, $element, $attrs, ngModelCtrl) {

    ////////////////////////////////////////////////////////////////////////////////
    // the following code handles positioning of the datetimepicker widget
    // just below the target element. This is to avoid the hideous datepicker bug
    // that causes it to be trimmed when its parent has limited height
    // Z.P
    ////////////////////////////////////////////////////////////////////////////////
    $element.on('dp.show', function(e) {

        // get the datetimepciker
        var elem = angular.element('.bootstrap-datetimepicker-widget');

        // detach from parent element and append to body
        angular.element('body').append(elem);

        // get target element
        var target = e.currentTarget || e.delegateTarget || e.target;

        // get bounding rects of parent and element
        var targetRect = angular.element(target)[0].getBoundingClientRect();
        var elemRect = elem[0].getBoundingClientRect();

        // do some math
        var marginTop = 10;
        var center = targetRect.left + (targetRect.width / 2) - (elemRect.width / 2);
        var top = targetRect.bottom + marginTop;

        // position the widget properly just below parent
        elem.css('position', 'absolute');
        elem.css('z-index', '10000000000000');
        elem.css('top', top + 'px');
        elem.css('bottom', 'auto');
        elem.css('left', center + 'px');
    });
}