Hello @AnnMarieW and @gmouawad,
When using the date filter, it automatically selects midnight in the time aspect, therefore, when you use equals, it will only show responses for the exact timestamp of 01/02/2023 or 2023-01-02T00:00:00 as these points dont exist, then you’ll need to adjust this.
Example:
If order to allow for only filtering of the date, I’d recommend creating your own date filter, something like this:
dagfuncs.cleanDateColumn = (cellValue) => {
if (cellValue === 'NaT') {
returnValue = ''
} else {
returnValue = cellValue.includes('T') ? cellValue.split('T')[0] : cellValue
}
return returnValue;
}
dagfuncs.DateComparator = (filterLocalDateAtMidnight, cellValue) => {
// converts timestamp to just date for easier user filtering
const dateAsString = cellValue ? dagfuncs.cleanDateColumn(cellValue): null;
if (dateAsString == null) {
return 0;
}
// convert date string to date
var tempDate = new Date(dateAsString);
// convert dates to disregard timezones
var userTimezoneOffset = tempDate.getTimezoneOffset() * 60000;
const cellDate = new Date(tempDate.getTime() + userTimezoneOffset);
// Now that both parameters are Date objects, we can compare
if (cellDate < filterLocalDateAtMidnight) {
return -1;
} else if (cellDate > filterLocalDateAtMidnight) {
return 1;
}
return 0;
}
To place in your code, you’d add these:
'filter': 'agDateColumnFilter', 'filterParams': {"comparator": {"function": "DateComparator"}}
You also dont need to convert the value getter to the date object as we take care of that inside the cleanDateColumn function:
from dash import Dash, dcc, html
import dash_ag_grid as dag
from datetime import datetime
rowData = [
{"date": datetime(2023, 1, 1, 1, 0, 0)},
{"date": datetime(2023, 1, 2, 2, 0, 0)},
{"date": datetime(2023, 1, 3, 3, 0, 0)},
{"date": datetime(2023, 1, 4, 18, 0, 0)},
{"date": datetime(2023, 1, 5, 22, 0, 0)},
]
# function to create a date object from a date string "YYYY-MM-DD"
date_obj = "d3.timeParse('%Y-%m-%dT%H:%M:%S')(params.data.date)"
# if the time is in utc:
# date_obj = "d3.utcParse('%Y-%m-%dT%H:%M:%S')(params.data.date)"
columnDefs = [
{
"headerName": "Datetime string",
"field": "date",
"filter": False,
},
{
"headerName": "MM/DD/YYYY",
"valueGetter": {"function": 'params.data.date'},
"valueFormatter": {"function": f"d3.timeFormat('%m/%d/%Y')({date_obj})"},
},
{
"headerName": "Mon DD, YYYY",
"valueGetter": {"function": 'params.data.date'},
"valueFormatter": {"function": f"d3.timeFormat('%b %d, %Y')({date_obj})"},
},
{
"headerName": "day, Mon DD, YYYY",
"valueGetter": {"function": 'params.data.date'},
"valueFormatter": {"function": f"d3.timeFormat('%a %b %d, %Y')({date_obj})"},
},
{
"headerName": "yyyy-mm-dd HH:MM:SS tt",
"valueGetter": {"function": 'params.data.date'},
"valueFormatter": {
"function": f"d3.timeFormat('%Y-%m-%d %H:%M:%S %p')({date_obj})"
},
},
{
"headerName": "yyyy-mm-dd hh:mm:ss",
"valueGetter": {"function": 'params.data.date'},
"valueFormatter": {
"function": f"d3.timeFormat('%Y-%m-%d %H:%M:%S')({date_obj})"
},
},
]
defaultColDef = {
"filter": "agDateColumnFilter",
"filterParams": {
"buttons": ["clear", "apply"],
"comparator": {"function": "DateComparator"}
},
"sortable": True,
}
app = Dash(__name__)
app.layout = html.Div(
[
dcc.Markdown("Datetime formatting example. Note - The date filter will not work with datetime. Time must be zero (i.e. 2023-01-01T00:00:00)"),
dag.AgGrid(id="date-times-example-2", columnDefs=columnDefs, rowData=rowData, defaultColDef=defaultColDef),
],
style={"margin": 20},
)
if __name__ == "__main__":
app.run(debug=True)
