plotly / plotly/dash-ag-grid

filterPlaceholder parameter of filterParams has no effect on Date filter

Open
#333 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

documentation
Dominant language
Python
Stars
241
Forks
47
PR merge metrics
No merged PRs in 30d

Description

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)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the provided Dash MRE and comparing the Date filter behavior with the documented filterPlaceholder parameter, including browserDatePicker set to false. Review the linked AG Grid issue and the project documentation for this parameter; done means confirming the limitation and either removing the misleading documentation or adding a verified locale example.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, python
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.