Dash AG Grid: remove time from date fields

Dash Python
1

All of the date type fields from my data frames show up in my AG Grid as date times: 2001-01-01T00:00:00

Even if I expressly convert datetime columns to dates.

Is there a straightforward way to tell ag grid not to show times on columns?

2

Hi @zack_nc !

You can use the column parameter valueFormatter

There are examples to format date field here:

3

Thanks,

I added this, per the link you sent:

    if 'date' in i.lower():
        date_obj = "d3.timeParse('%Y-%m-%d')(params.data.date)"
        entry['valueFormatter'] = {"function": f"d3.timeFormat('%Y-%m-%d')({date_obj})"},

I still get 2023-12-01T00:00:00

Any suggestions?

4

You have to use those functions in the columnsDefs parameter.
Something like:

columnDefs = [
    {
        "headerName": "Date",
        "valueGetter": {"function": date_obj},
        "valueFormatter": entry['valueFormatter'],
    },
]
5

That’s what I’m doing.

The code snipped is part of building the columnDefs object.

6

So for example, this ‘columns’ object will get set to the columnDefs property

image
image1617×610 50.2 KB

r

7

Hello @zack_nc,

I normally just split at the T.

params.value ? params.value.split(‘T’)[0] : null
8

Hey @zack_nc - I’m trying to replicate what you’re describing but not able to do so. I’ve tried a few different ways based on what I think your code might be doing. Maybe I’m missing something. Are you able to share more code / edit my example here to re-create the problem?

import datetime

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

row_data = [{"date": datetime.datetime.now().isoformat()}]

columnDefs = [
    {
        "headerName": "Raw Value",
        "valueFormatter": {"function": "params.data.date"},
    },
    {
        "headerName": "Format Only",
        "valueFormatter": {
            "function": "d3.timeFormat('%Y-%m-%d')(d3.timeParse('%Y-%m-%dT%H:%M:%S.%f')(params.data.date))"
        },
    },
    {
        "headerName": "With Getter",
        "valueGetter": {
            "function": "d3.timeParse('%Y-%m-%dT%H:%M:%S.%f')(params.data.date)"
        },
        "valueFormatter": {"function": "d3.timeFormat('%Y-%m-%d')(params.value)"},
    },
    {
        "headerName": "Raw Full Format",
        "valueFormatter": {
            "function": "d3.timeFormat('%Y-%m-%dT%H:%M:%S.%f')(d3.timeParse('%Y-%m-%dT%H:%M:%S.%f')(params.data.date))"
        },
    },
]


app.layout = html.Div(
    [
        dag.AgGrid(
            id="date-filter-example",
            columnDefs=columnDefs,
            rowData=row_data,
            columnSize="autoSize",
        ),
    ],
)

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

image
image773×184 2.27 KB