Dash AG Grid: remove time from date fields

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?

Hi @zack_nc !

You can use the column parameter valueFormatter

There are examples to format date field here:


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?

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

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

That’s what I’m doing.

The code snipped is part of building the columnDefs object.

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


Hello @zack_nc,

I normally just split at the T.

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

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(

if __name__ == "__main__":