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.