Dash-ag-grid: date picker will not show less than 5 years

Dash Python
1

Hi,

I have a date filter with params:

"filterParams": {
                "browserDatePicker": True,
                "minValidYear": 2023,
                "maxValidYear": 2024,
            },

However an unexpected result is that the years 2020 through 2022 still show up in the date picker. The behavior is that when you open the year you cannot select any months.

This is different than if the min year was 2020, as you would be able to select those months. But it is still annoying for it to render the buttons even though there is nothing to select.

Any solution?

Code example here:

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"
    "olympic-winners.csv"
)

# basic columns definition with column defaults
columnDefs = [
    {"field": "athlete", "filter": False},
    {"field": "country", "filter": False},
    {
        "headerName": "Date",
        "filter": "agDateColumnFilter",
        "valueGetter": {"function": "params.data ? d3.timeParse('%d/%m/%Y')(params.data.date) : ''"},
        "valueFormatter": {"function": "params.value !== '' ? d3.timeFormat('%d/%m/%Y')(params.value) : ''"},
        "filterParams": {
            "browserDatePicker": True,
            "minValidYear": 2023,
            "maxValidYear": 2024,
        },
    },
]

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

    "enableRowGroup": True,
}

dashGridOptions = {
        # Grouping / Sidebar
        "sideBar": True,
        "rowGroupPanelShow": 'always',
        # Tooltip
        "tooltipShowDelay": 0,
        "tooltipHideDelay": 2000,
        # Other
        "animateRows": True,
        "rowSelection": "multiple",
        "suppressAggFuncInHeader": True,
}

app.layout = html.Div(
    [
        dcc.Markdown("Date Filter Example"),
        dag.AgGrid(
            id="date-filter-example",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,

            dashGridOptions=dashGridOptions,
            enableEnterpriseModules=True,
        ),
    ],
    style={"margin": 20},
)

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

Image of behavior:

example_1

Thank you

3

Hi @daflamingpotato

The component that’s displayed will depend on the browser and it’s not possible to update it from Dash - other than the props available like min, max and step. You can find more information here:

Another option is to use a custom component. You can find an example in the docs: