CODEWITHSUNDEEP
jqueryjquery-uiangularjsjquery-ui-datepicker
David Sanders
David Sanders

Reputation: 70

jQuery date picker not working with ng-grid cell

I am having an issue with integrating jQuery's date picker with the AngularJS ng-grid extension; more specifically the jQuery date picker is not able to push data back to the ng-grid and instead throws this error: Uncaught Missing instance data for this datepicker All research on this error message does not pertain to its use within ng-grid.

Issue recreated in this fiddle: http://jsfiddle.net/ADukg/2363/

Any help or explanation would be much appreciated. Thanks!

var myApp = angular.module('myApp', ['ui', 'ngGrid']);

function Ctrl($scope) {

    $scope.data = [{
        "Title": "Title",
        "Date": new Date("01/03/1970")

    }];

    $scope.kpiGridOptions={data:'data',
        enableCellEdit:true,
                columnDefs:[{field:'Title', displayName:'Title'},
            {field:'Date', displayName:'Date', editableCellTemplate:'<input ui-date ui-date-format ng-model="row.entity[col.field]">'}]
    }
};

Upvotes: 2

Views: 2403

Answers (1)

Brent Morrow
Brent Morrow

Reputation: 1064

Seems like you just had a few options incorrect. editableCellTemplate should be set to true and you should specify the template in cellTemplate.

http://jsfiddle.net/ADukg/2370/

$scope.kpiGridOptions = { 
    data:'data',
    enableCellEdit:true,
    columnDefs: [
        { field:'Title', displayName:'Title'},
        { field:'Date', displayName:'Date', editableCellTemplate: true, cellTemplate: 
          '<input ui-date ui-date-format ng-model="row.entity[col.field]">' }
    ]
}

Also, "Date": new Date("01/03/1970") causes no default date to be shown in the input field. Changing the assignment to a string representation solves this issue though, as you can see in the jsfiddle. I don't have time to figure out why that is right now, hopefully it isn't an issue for you.

Hope this helps.

Upvotes: 4

Related Questions