Table Date filtering not working

Dash Python
9

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:

image
image805×298 9.52 KB

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"}}

image
image758×303 10.2 KB

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)