How to use bootstrap datepicker inside ng-grid

Question

I am trying to use bootstrap datepicker (via angulart ui bootstrap ) inside ng-grid .

I set 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 on a cell that changes to a datupixer, but - the calendar popup is cut off by the cell borders - this means that I can only see the part of the popup that fits into the cell (top border)

What do I need to allow the datepicker popup to appear above the grid instead of being snapped to a cell?

Update: tried switching from Angular UI bootstrap to angular -strap, datepicker now works, but I have the same problem with timepicker

Answer 1

Use 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

I actually had the same problem, and in the end I came up with this solution. Seems to work well. The main idea here is to connect to the show dicketimepicker ( dp.show ) event, separate it from where it is, and attach it to the body with position = absolute and set its location just below the target element.

Please note that the code below is taken from the directive that wraps bootstrap datetimepicker, however the same solution should be applied anywhere, as long as you can get the handle of the picker element.

Hope this 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 // ZP //////////////////////////////////////////////////////////////////////////////// $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'); }); } 

Answer 3

Go to the ng-grid.css file and comment out the following:

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

This worked for me to display verification messages, and for my application I did not see any side effects.

Answer 4

Use the following cellTemplate for the cell where you want to add the datepicker.

  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

Replace ng-input in editableCellTemplate with your own directive.

Plunker

The critical point in this directive is ngGridEventEndCellEdit. Instead of emitting it "onBlur", you emit it when the datepicker isOpen parameter is set to false:

  scope.isOpen = true; scope.$watch('isOpen', function (newValue, oldValue) { if (newValue == false) { scope.$emit('ngGridEventEndCellEdit'); } }); angular.element(elm).bind('blur', function () { //scope.$emit('ngGridEventEndCellEdit'); }); 

Corresponding editableCellTemplate (pay attention to my input instead of 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"/>';