I am using ng-grid from AngularJS UI to make a grid and want to have a date cell editable using jQuery datepicker.
The issue is that when the datepicker popup appears, any click inside the popup (whether to select a date or to change the month), blurs the ng-grid input field and a JS error occurs "Uncaught Missing instance data for this datepicker".
Code snippets below.
Any help is appreciated. Thank you !
=== HTML
<div ng-controller="MyCtrl1">
<div class="gridStyle" ng-grid="gridOptions" ng-show="visible"></div>
</div>
=== GRID OPTIONS FOR THE CELL IN THE CONTROLLER
{
field: 'loanEndDate',
displayName: 'Loan End',
enableCellEdit: true,
editableCellTemplate: '<input type="text" datepicker ng-model="$parent.currentDate" ng-input="COL_FIELD" />'
}
=== ANGULAR JS DIRECTIVE
directive('datepicker', function() {
return {
restrict: 'A',
require: '?ngModel',
scope: {},
link: function(scope, element, attrs, ngModel) {
if (!ngModel) return;
var optionsObj = {};
optionsObj.dateFormat = 'dd/mm/yy';
var updateModel = function(date) {
scope.$apply(function () {
ngModel.$setViewValue(date);
});
};
optionsObj.onSelect = function(date, picker) {
updateModel(date);
};
ngModel.$render = function() {
element.datepicker('setDate', ngModel.$viewValue || '');
};
element.datepicker(optionsObj);
}
};
});