formatting date angularjs ui-grid

Question

I am trying to change the way date is being displayed. the data is coming as string with the format "Sun May 03 18:04:41 2009"

i looked at the examples, and they were asking me to use

$scope.gridOptions = {
  data: 'mydata',
  enableRowSelection: true,
  multiSelect: false,
  enableColumnResize: true,
  columnDefs: [
    { field: 'startDate', displayName: 'Date', cellFilter: 'date:\'yyyy-MM-dd\'' }]
};

however this is not working for me. Data is still being displayed as it is. Rather than "2009-05-13" Anything i am doing wrong? Thanks in advance!

give a try by this `cellFilter: 'date:"yyyy-MM-dd\"'` – Pankaj Parkar Aug 10 '15 at 21:08 — Pankaj Parkar, Aug 10 '15 at 21:08
thanks for the help, but still not doing the trick – myTD Aug 10 '15 at 21:24 — myTD, Aug 10 '15 at 21:24

score 50 · Answer 1 · answered Aug 13 '15 at 23:17

50

Use: type: 'date', cellFilter: 'date:\'MM/dd/yyyy\''

$scope.gridOptions = {
data: 'mydata',
enableRowSelection: true,
multiSelect: false,
enableColumnResize: true,
columnDefs: [
{ field: 'startDate', displayName: 'Date',type: 'date', cellFilter: 'date:\'yyyy-MM-dd\'' }]};

answered Aug 13 '15 at 23:17

vvardhanz

657
1
4
7

can we add custom filter function in cellFilter? – Anita Mehta Apr 27 '16 at 07:04
@AnitaMehta yes you can add custom cell filter function – Pratik Bhat Apr 28 '16 at 14:17
type date shows a datepicker in edit mode. but value is not binding instead it shows placeholder mm/dd/yyyy – Adeel Shekhani Dec 14 '19 at 12:22

score 11 · Accepted Answer · answered Aug 10 '15 at 21:57

It looks like you are trying to use an incompatible date format with the Angular date filter. The docs say that it needs to be a Date object, milliseconds or an ISO 8601 date. Since your date string doesn't match any of that you will either need to roll your own string formatter or convert that value to a Date object or milliseconds before passing it to the date filter.

score 2 · Answer 3 · answered May 01 '16 at 14:11

2

Use cellFilter: 'date:"longDate"'

columnDefs: [
         { name: "ID", displayName: "ID"},
         { name: "Date", displayName: "Date", cellFilter: 'date:"longDate"'},

answered May 01 '16 at 14:11

Shashangka Shekhar

29
5

this is the format now it seems cellFilter: 'date:longdate' – kiev Jul 31 '17 at 16:53

formatting date angularjs ui-grid

3 Answers3