Date input on UI Grid

I have an AngularJS ui-grid for displaying a few fields including a date. The date comes from the server with the following format: 2018-01-31. On the column definitions I have something similar to:

.columnDefs = [
...
      { name: 'startDate', displayName: 'Start Date', width: 170, enableHiding: false, cellTemplate: dateCellTemplate},
     ];

I've already added type: 'date' and cellFilter: 'date:\'yyyy-MM-dd\'', none of them have worked.

The template has just a date input like this:

const dateCellTemplate = '<div><input type="date" ng-model="MODEL_COL_FIELD" ng-change="grid.appScope.saveEdit(row)"></div>'

And whenever I receive the server response, my js console shows me the following error.

Error: [ngModel:datefmt] http://errors.angularjs.org/1.4.8/ngModel/datefmt?p0=2018-01-24

Upvotes: 0

Views: 653

Answers (1)

Guranjan Singh
Guranjan Singh

Reputation: 734

You need to convert the model to a Date object before using it. Use

new Date(your date here);

This is because you're using the input type Date and angular expects a date type rather than string.

Upvotes: 2

Related Questions