✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to insert Date and Time to DASH App

I have created a DASH App and would like to add in the upper corner of it TODAY’s DATE and TIME.

How is it done?


I think your solution would be to use update text as in this example. One method is to modify the example updates on page load or you can set up an update function that dictates the changes in time and use an update function to refreshes and updates the time. See the examples on that page. Its possible see the tables on this page.

Thanks @Dee for the tips but your second link belongs to Zimbabwe’s related content.

Check the table, its done using Dash. The date is at the bottom. more of what you want to do on the page, just scroll to the middle of the page you will see tables. They have dates at the bottom. confirm if you saw it. If you still have challenges with the code just let me know.

You can state a Div with update text in the layout and use the update function in the call back like

app.layout = html.Div([
             style={'font-size': '10px'}),
            interval=1*1000, # in milliseconds

@app.callback(Output('live-update-text', 'children'),
              [Input('interval-component', 'n_intervals')])
def update_date(n):
      return [html.P('Last updated ' +str(datetime.datetime.now()))]

I think this would solve it

Sorry for late comment but what I did was as below.

datetime.datetime.now().strftime(’%Y-%m-%d’), style={‘opacity’: ‘1’,‘color’: ‘white’, ‘fontSize’: 12}),
html.H1(datetime.datetime.now().strftime(’%H:%M:%S’), style={‘font-family’: ‘Times New Roman’,‘opacity’: ‘0.5’,‘color’: ‘white’, ‘fontSize’: 12}),
html.H6(‘Daily Updates’)
], className=“three columns gs-header gs-accent-header padded”, style={‘float’: ‘right’}),

        ], className="row gs-header gs-text-header"),

1 Like