Date Filters

Date filters allow you to filter date data. The Provided Filters and Simple Filters pages explain the parts of the date filter that are the same as the other provided filters. This page builds on that and explains some details that are specific to the date filter.

Date Filter Parameters

Date Filters are configured though the filterParams attribute of the column definition:

Date Selection Component

By default the grid will use the browser-provided date picker for Chrome and Firefox (as we think it’s nice), but for all other browsers it will provide a simple text field. To override this and provide a custom date picker, see Date Component.

Date Filter Comparator

Dates can be represented in your data in many ways e.g. as a Date object, as a string in a particular format such as ‘26-MAR-2020’, or something else. How you represent dates will be particular to your application.

By default, the date filter assumes you are using JavaScript Date objects. If this is the case, the date filter will work
out of the box. However, in Dash, when a date object is sent from the server to the client it is serialized to JSON
and becomes a string. To turn a date string into a JavaScript Date object, dash-ag-grid has included the d3-time-format library.

You can use d3.timeParse to create a JavaScript Date object from a string.

date_obj= d3.timeParse(specifier)(date string)

For example, if you had a column with a date field, here are ways to create a date object based on the date string:

# date string "2023-01-30"
date_obj = "d3.timeParse('%Y-%m-%d')(data.date)"

# date string "Sun Jan 01, 2023"
date_obj = "d3.timeParse(%a %b %d, %Y')(data.date)"

Here are the specifiers:

To see examples of displaying dates in various formats please see the Value Formatters section

Note - the filter works for dates only, not datetime. So if your date string looks like “2023-01-01T22:00:00” you will
first need to change it to date string i.e. “2023-01-01”

If you prefer to write your own date filter comparator function in JavaScript to perform the date comparison, please see the AG Grid docs.

Example: Date Filter

The example below shows the date filter in action, using some of the configuration options discussed above:

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,
            "minValidYear": 2000,
            "maxValidYear": 2021,
        },
    },
]

defaultColDef = {
    "flex": 1,
    "minWidth": 150,
    "filter": True,
    "floatingFilter": 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),
    ],
    style={"margin": 20},
)

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

Date Filter Example

More Filter Examples