ag-grid modify date filter display

Question

I use ag-grid on my Angular 4 app to display a table. In the date column, I use default date filter agDateColumnFilter as in the documentation. The placeholder shown in the filter input is always mm/dd/yyyy. Is it possible to change it to dd/mm/yyyy?

score 2 · Answer 1 · answered Dec 20 '17 at 14:49

2

we can do this with the moment

{headerName: "Updated at", field: "updated_at", hide: true, cellFormatter: function(data) {
    return moment(data.value).format('L');
}}

Refer this for further information

answered Dec 20 '17 at 14:49

Sachila Ranawaka

39,756
7
56
80

1

thank you for the reference, I was able to format the whole data row as I wanted, but the filter input still remains the issue. I still have to type `mm/dd/yyyy` to filter data rows while they are in `dd/mm/yyyy` format. And the placeholder in filter input is still `mm/dd/yyyy` as default – Hoàng Nguyễn Dec 20 '17 at 15:08
@Sachila :can you tell me sir how to get selected value from date filter? – Kapil Soni Apr 18 '21 at 04:43

score 2 · Answer 2 · answered Mar 02 '18 at 06:52

I currently have the same problem.

Since ag-grid uses input type="date" for its date filter it suffers from the restrictions mentioned here -> https://stackoverflow.com/a/9519493/885338 . I can only wonder what lead to the horrible decision not to let the display format be editable.

You can verify it by changing the browser's language.

The only solution I currently see is to implement a custom filter as described here -> http://www.ag-grid.com/javascript-grid-date-component/

If you want somekind of popup calendar be aware that you might have to fiddle with ag-grid's CSS, most notably some overflow properties (on class ag-root for example) and I don't know what the effects this has on ag-grid.

score 1 · Answer 3 · answered Mar 14 '19 at 11:32

1

Use browserDatePicker: true in filterParams property

answered Mar 14 '19 at 11:32

Sandipsinh Parmar

86
4

ag-grid modify date filter display

3 Answers3