plotly/dash-ag-grid

filterPlaceholder parameter of filterParams has no effect on Date filter

Opened this issue · 1 comments

According to the docs, the filterPlaceholder parameter of filterParams can be assigned to Date filters. I have tried to provide them as various string formats, but it has no effect on the placeholder text, even when the browserDatePicker property is set to False.

I suspect this is not an issue with dash-ag-grid but with ag-grid itself: https://github.com/ag-grid/ag-grid/issues?q=label%3AAG-3735+is%3Aclosed. As the issue has been in their backlog for quite some time, I think it would be necessary to remove this parameter from the docs. If there is a way to override the locale (since the date format is locale dependent for the Date selector), could you please provide an example?

Related MRE:

import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

# basic columns definition with column defaults
columnDefs = [
    {"field": "athlete", "filter": False},
    {"field": "country", "filter": False},
    {
        "headerName": "Date",
        "filter": "agDateColumnFilter",
        "valueGetter": {"function": "d3.timeParse('%d/%m/%Y')(params.data.date)"},
        "valueFormatter": {"function": "params.data.date"},
        "filterParams": {
            "browserDatePicker": True,
            "filterPlaceholder": 'yyyy-mm-dd',
        },
    },
]

defaultColDef = {
    "flex": 1,
    "minWidth": 150,
    "filter": True,
    "floatingFilter": True,
}

app.layout = html.Div(
    [
        dcc.Markdown("Date Filter Example"),
        dag.AgGrid(columnDefs=columnDefs, rowData=df.to_dict("records"), defaultColDef=defaultColDef),
    ],
    style={"margin": 20},
)

if __name__ == "__main__":
    app.run_server(debug=True)

Hi @msz0ke - You are correct that this looks like an issue in the upstream AG Grid library. The recommended workaround is to use a custom date picker component and you can find an example in the docs here https://dash.plotly.com/dash-ag-grid/cell-editor-components.

We can make a note of this issue in the docs, but I don't recommend removing it because the placeholder can be used in custom components and other data types.

Since there will be no changes to this library, this will be closed. This would be a great topic for the community forum to discuss other options for workarounds.