Date format in ng-grid row template

Question

I've created a ng-grid with the following column definitions:

columns: [
  { field: "CompanyPkid", visible: false },
  { field: "CompanyName", visible: false },
  { field: "StartDate", visible: false, cellFilter: "date:'yyyy-MM-dd'" },
  { field: "CompanyId", 
    displayName: "Company ID",
    cellTemplate: "<div class=\"ngCellText\" ng-class=\"col.colIndex()\">"+
                    "<a href=\"Company/Edit/{{row.getProperty('CompanyPkid')}}\">"+
                      "{{row.getProperty(col.field)}}"+
                    "</a><br />"+
                    "{{row.getProperty('CompanyName')}}<br />"+
                    "{{row.getProperty('StartDate')}}"+
                  "</div>",
  }],

One of the columns is an hidden date column.

One of the columns uses a template and includes the value from the hidden date column.

I would like to format the date in the multiline column to yyyy-MM-dd. Is this possible? If so, how?

Answer 1

Use the date filter, like this:

{{row.entity.StartDate | date:'yyyy-MM-dd'}}

Answer 2

I ran into a problem with the approach above. If you're using filtering or sorting on the column, they still operate on the timestamp or Date object from the field value, not the results of using the filter inside the cellTemplate. So, users could enter "03" in the column filter but see a date like "12/31/2005" - the 03 was in the timestamp, which isn't shown.

The solution I found is to use cellFilter: 'date:"MM/dd/yyyy"' in the columnDef object. This preserves both sorting and filtering while allowing you to display the date how you want. Credit to Victor: http://www.victorshi.com/blog/post/How-to-format-a-datetime-column-in-ng-grid