How to insert Date and Time to DASH App

Dash Python
1

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?

Thanks.

2

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.

3

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

4

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.

5

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([
    html.Div(id='live-update-text',
             style={'font-size': '10px'}),
    dcc.Interval(
            id='interval-component',
            interval=1*1000, # in milliseconds
            n_intervals=0
    )
])

@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

6

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

html.Div([
html.H1(
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"),

        html.Br([]),
1 Like