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 Filters are configured though the filterParams attribute of the column definition:
alwaysShowBothConditions
(boolean) By default, only one condition is shown, and a second is made visible once a first condition has been entered. Set this to true to always show both conditions. In this case the second condition will be disabled until a first condition has been entered. Default: falsebuttons
Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are:closeOnApply
(boolean) If the Apply button is present, the filter popup will be closed immediately when the Apply or Reset button is clicked if this is set to true. Default: false
browserDatePicker
(boolean) This is only used if a date component is not provided. By default the grid will use the browser date picker in Chrome and Firefox and a plain text box for all other browsers (This is because Chrome and Firefox are the only current browsers providing a decent out-of-the-box date picker). If this property is set to true, the browser date picker will be used regardless of the browser type. If set to false, a plain text box will be used for all browsers.
comparator
(Function) -Required if the data for the column are not native JS Date objects.debounceMs
(number) Overrides the default debounce time in milliseconds for the filter. Defaults are:defaultJoinOperator
By default, the two conditions are combined using AND. You can change this default by setting this property. Options: AND, ORdefaultOption
(string) The default filter option to be selected.filterOptions
(IFilterOptionDef | ISimpleFilterModelType) Array of filter options to present to the user. See Filter Options.filterPlaceholder
(FilterPlaceholderFunction | string) Placeholder text for the filter textboxinRangeFloatingFilterDateFormat
(string) Defines the date format for the floating filter text when an in range filter has been applied. Default: YYYY-MM-DDinRangeInclusive
(boolean) If true, the ‘inRange’ filter option will include values equal to the start and end of the range.includeBlanksInEquals
(boolean) If true, blank (null or undefined) values will pass the ‘equals’ filter option.includeBlanksInGreaterThan
(boolean) If true, blank (null or undefined) values will pass the ‘greaterThan’ and ‘greaterThanOrEqual’ filter options.includeBlanksInLessThan
(boolean) If true, blank (null or undefined) values will pass the ‘lessThan’ and ‘lessThanOrEqual’ filter options.includeBlanksInRange
(boolean) If true, blank (null or undefined) values will pass the ‘inRange’ filter option.maxValidYear
(number) This is the maximum year that may be entered in a date field for the value to be considered valid. Default is no restriction.minValidYear
(number) This is the minimum year that may be entered in a date field for the value to be considered valid. Default: 1000readOnly
(boolean) If set to true, disables controls in the filter to mutate its state. Normally this would be used in conjunction with the Filter API. See Read-only Filter UI. Default: falsesuppressAndOrCondition
(boolean) If true, the filter will only allow one condition. Default: falseBy 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.
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:
[01,31]
.[ 1,31]
; equivalent to %_d
.[000000, 999999]
.[00,99]
.[00,23]
.[01,12]
.[001,366]
.[01,12]
.[00,59]
.[000, 999]
.[1,4]
.[00,61]
.[1,7]
.[00,53]
.[01, 53]
.[0,6]
.[00,53]
.%-m/%-d/%Y.*
%-I:%M:%S %p.*
[00,99]
.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.
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