AngularJS ngGrid issue when cell editing using jQuery datepicker

问题

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

回答1:

I think I had a very similar problem, for which the answer can be found here: https://stackoverflow.com/a/20813720/3087367

The essence is that your own template should properly communicate to ng-grid by listening to the ngGridEventStartCellEdit event by focusing your editor element, and the most important thing is: your component MUST emit the ngGridEventEndCellEdit event when the cell loses focus (or when you want the editor to disappear, like maybe when pressing enter or something).

Hope this helps you fix your problem.

来源：https://stackoverflow.com/questions/20093892/angularjs-nggrid-issue-when-cell-editing-using-jquery-datepicker

标签

javascript

jquery

angularjs

datepicker

ng-grid