How to configure date render format in AG-Grid

Question

How can I set the render format of date columns in AG-Grid? When I look at samples I see dates in formats of dd/mm/yyyy, but my date columns always show up in a rather long format that looks like "Sat May 12 2012 01:00:00 GMT+0100 (BST)". I would like a default format of YYYY-MM-dd with the ability for users to configure their desired format themselves. Samples I've found show how to do custom filtering with a comparator and stuff like that but the default works fine for me except for how the dates are actually rendered.

Thanks, Troy

Answer 1

This is for Angular2+ version. If you are using moment library in your application. Then the job is really simple

In your .ts file:

    import * as moment from 'moment';

{
    headerName: 'End Date',
    field: 'endDateUTC',
    minWidth: 80,
    maxWidth: 100,
    valueFormatter: function (params) {
        return moment(params.value).format('yyyy-MM-dd');
    },
},

And the output you will get is:

End date: 2019-10-05

Also for the ability to configure the date format for users: You can add a dropdown some where on the application and allow them to pick their date style and use the above valueFormatter and pass the function dynamically with many date formats available from moment library.

In case if your value is in string format:

First convert it in to Date and then use the above value formatter function

Example:

  this.firstTaskDate = moment(this.firstTaskDate, 'DD/MM/YY')
                .utc()
                .toDate();

Hope this will be helpful to some one.

Answer 2

The best way around for this would be to use a formatter

https://www.ag-grid.com/javascript-grid-value-getters/

Hope this helps

Answer 3

I create a cell renderer for this:

cellRendererFormattedDate = params => {
   var date = $filter("date")(params.value, 'yyyy-MM-dd h:mm:ss a');
   return `<div style="text-align:right;">${date}</div>`;
}

In your controller, be sure you have injected $filter.
In your columnDefs, be sure to define cellRenderer: cellRendererFormattedDate

Answer 4

Although cell renderer and value formatter will work, I would use a valueGetter for a column something like this -

headerName: "Issue Date",
valueGetter: function dateValueGettter(params) {
  var date = $filter("date")(params.getValue("issueDate"), 'yyyy-MM-dd');
  return date;
}

Above example is using Angular date filter.

The benefit of using a value getter is that sorting and filtering on such column can now be based on the values returned by value getter.