twitter-bootstrap 如何在 ng-grid 中使用 bootstrap datepicker
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20983948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use bootstrap datepicker inside ng-grid
提问by Nir
I'm trying to use bootstrap datepicker (via angulart ui bootstrap) inside an ng-grid.
我正在尝试在ng-grid 中使用 bootstrap datepicker（通过angulart ui bootstrap）。
I'm setting the grid with:
我正在设置网格：
$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" />' }
]
};
And it works, when I click a cell it changes into a datepicker - but - the calendar popup is clipped by the cell boundaries - this means that I can only see the part of the popup that fits into the cell (the top border)
它有效，当我单击一个单元格时，它会变成一个日期选择器 - 但是 - 日历弹出窗口被单元格边界剪裁 - 这意味着我只能看到适合单元格的弹出窗口部分（顶部边框）
What do I need to set to allow the datepicker popup to appear above the grid instead of being clipped to the cell?
我需要设置什么才能让日期选择器弹出窗口出现在网格上方而不是被剪切到单元格？
Update: tried switching from Angular UI bootstrap to angular-strap, now the datepicker works but I have the exact same problem with the timepicker
更新：尝试从 Angular UI 引导程序切换到 angular-strap，现在日期选择器可以工作了，但我对时间选择器有完全相同的问题
回答by lmyers
Use datepicker-append-to-body=true
使用 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" />' }
]
};
};
回答by Zacky Pickholz
I actually had the same issue and eventually came up with this solution. Seems to be working well. The basic idea here is to hook on the datetimepicker show event (dp.show), detach it from wherever parent it may have, attach it to the body with position=absolute and set its location just below the target element.
我实际上遇到了同样的问题，并最终想出了这个解决方案。似乎运作良好。这里的基本思想是挂钩 datetimepicker 显示事件（dp.show），将其从它可能拥有的任何父级分离，使用 position=absolute 将其附加到主体并将其位置设置在目标元素正下方。
Note that the below code is taken from a directive wrapping the bootstrap datetimepicker, however the same solution should apply anywhere as long as you can get a handle on the picker element.
请注意，以下代码取自包装 bootstrap datetimepicker 的指令，但是只要您可以获取选择器元素的句柄，相同的解决方案应该适用于任何地方。
Hope that helps someone :)
希望对某人有所帮助:)
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');
});
}
回答by Rob
Go into the ng-grid.css file and comment out the following:
进入 ng-grid.css 文件并注释掉以下内容：
.ngCell {
/*overflow: hidden;*/
position: absolute;
top: 0;
bottom: 0;
background-color: inherit;
}
This has worked for me for displaying validation messages and for my application I have seen no side effects.
这对我显示验证消息很有用，对于我的应用程序，我没有看到任何副作用。
回答by Akash Nigam
Use the following cellTemplate for the cell where you want to add a datepicker. :
将以下 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>';
回答by renegone
Replace the ng-input in the editableCellTemplate with your own directive.
将 editableCellTemplate 中的 ng-input 替换为您自己的指令。
the critical point in that directive is the ngGridEventEndCellEdit. Instead of emitting it "onBlur", you emit it when datepicker's isOpen is set to false:
该指令的关键点是 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');
});
The according editableCellTemplate (note my-input instead of ng-input):
相应的 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"/>';
