如何在ng-grid中使用Bootstrap日期选择器（datepicker）

Question

如何在ng-grid中使用Bootstrap日期选择器（datepicker）

angularjstwitter-bootstrapdatepickertimepicker

7

我正在尝试在ng-grid中使用bootstrap日期选择器（通过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" />' }
        ]
};

当我点击单元格时，日期选择器会弹出，但是弹出的日历会被单元格边界裁剪 - 这意味着我只能看到适合单元格的部分（顶部边框）。请问我需要设置什么以允许日期选择器弹出窗口出现在网格上方，而不是被裁剪到单元格中？

更新：尝试从Angular UI bootstrap切换到angular-strap，现在日期选择器可以使用，但我遇到了与时间选择器完全相同的问题。

- Nir

5个回答

1

我曾经遇到相同的问题，最终找到了这个解决方案。看起来效果很好。基本思路是钩取datetimepicker展示事件(dp.show)，将其从任何可能的父级中分离出来，使用position=absolute将其附加到body上，并将其位置设置在目标元素的正下方。

请注意，以下代码取自包装bootstrap datetimepicker的指令，但只要您可以获得选择器元素的句柄，相同的解决方案应该适用于任何地方。

希望对某人有所帮助 :)

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

- Zacky Pickholz

0

在editableCellTemplate中，将ng-input替换为您自己的指令。

Plunker

该指令的关键点是ngGridEventEndCellEdit。您可以在datepicker的isOpen属性设置为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');
            });

相应的可编辑单元格模板（请注意，使用 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"/>';

- renegone

0

如果您想要添加日期选择器，请使用以下单元格模板：

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

- Akash Nigam

0

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

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

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

- Rob

这会使水平滚动条覆盖网格的最后一行和时间选择器弹出窗口（请参见问题中的更新，为什么使用时间选择器而不是日期选择器），并且单元格仍然被裁剪。 - Nir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lmyers · Accepted Answer

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

};