AG Grid: how to format date placeholder when using agDateFilter?

Dash Python
1

Hello,

I have a date column formatted as YYYY-MM-DD to be understood as date for AG Grid.
Filtering works well, but I would like the filter date format (2) to be consistent with the displayed dates format (1):

image
image1522×768 91.3 KB

I.e. instead of mm / dd / yyyy I would like to have yyyy / mm / dd . Because otherwise it’s weird for the user experience.

How can I achieve that ? I looked into filterParams here, but can’t find the option.
Note that I don’t want to change the format in the column (it can be done with valueFormatter or valueGetter) but I want to change the way that it is formatted in the filter popup.

Edit: I think the solution lies in localization but this still do not work:

    grid = dag.AgGrid(
        id="sales_grid",
        rowData=df.to_dict("records"),
        columnDefs=column_defs,
        dashGridOptions={
            "localeText": {
                "equals": "EQUALS",  # it works
                "dateFormatOoo": "yyyy/mm/dd",  # it doesn't work
            }
        }
    )

Thank you :slight_smile:

2

This seems to be an issue with AG Grid. Similar problem reported here: Change date filter placeholder react · Issue #4974 · ag-grid/ag-grid · GitHub

3

Hi @spriteware

It’s necessary to use a custom date picker component if you would like to change the date format in the date picker.

There is an example of one in the docs:

1 Like
4

Hi @AnnMarieW

I’m already using custom date picker in AG Grid cells (passed as function in cellEditor prop) as mentioned in docs you linked. However, I can’t manage to include it in filter. Any tips?

5

Hi @baller1
Does the example in the docs work for you?

Can you make a minimal example of what you have so far?

6

The example from docs works like a charm. when I apply it to cellEditor but not when I pass custom editor to (floating) filter. In that case I get this error.

image (4)
image (4)1110×126 3.14 KB

7

I don’t understand how you are trying to use this - can you make a minimal example I can run that reproduces the issue?