使用 jQuery datepicker 编辑单元格时的 AngularJS ngGrid 问题答案

【问题标题】：AngularJS ngGrid issue when cell editing using jQuery datepicker使用 jQuery datepicker 编辑单元格时的 AngularJS ngGrid 问题
【发布时间】：2023-03-18 19:09:02
【问题描述】：

我正在使用 AngularJS UI 中的 ng-grid 来制作网格，并希望使用 jQuery datepicker 来编辑日期单元格。
问题是当日期选择器弹出窗口出现时，弹出窗口内的任何点击（无论是选择日期还是更改月份）都会模糊 ng-grid 输入字段并且发生 JS 错误“未捕获此日期选择器的缺失实例数据”。

下面的代码 sn-ps。
任何帮助表示赞赏。谢谢！

=== HTML

  <div ng-controller="MyCtrl1">
    <div class="gridStyle" ng-grid="gridOptions" ng-show="visible"></div>
  </div>

=== 控制器中单元格的网格选项

  {
    field: 'loanEndDate',
    displayName: 'Loan End',
    enableCellEdit: true,
    editableCellTemplate: '<input type="text" datepicker ng-model="$parent.currentDate" ng-input="COL_FIELD" />'
  }

=== Angular JS 指令

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

【问题讨论】：

标签： javascript jquery angularjs datepicker ng-grid

【解决方案1】：

我想我有一个非常相似的问题，可以在这里找到答案：https://stackoverflow.com/a/20813720/3087367

本质是你自己的模板应该通过关注你的编辑器元素来监听 ngGridEventStartCellEdit 事件来正确地与 ng-grid 通信，最重要的是：你的组件必须在单元格失去焦点时发出 ngGridEventEndCellEdit 事件（或当您希望编辑器消失时，例如按 Enter 或其他什么时）。

希望这可以帮助您解决问题。

【讨论】：