Display correct time in browsers timezone

Dash Python
1

is there a way for Dash to display time in the correct time zone of the browser?

2

Hi @marketemp

You can use a cleintside callback to display the local date and time from the browser

This one will display the current local date when the app starts:


import dash
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    html.H1(id="date-time-title",)
)


app.clientside_callback(
    """
    function(id) {          
        const local_date_str = new Date().toLocaleString();                   
        return "The current date and time is: " + local_date_str
    }
    """,
    Output('date-time-title', 'children'),
    Input('date-time-title', 'id'),
)



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

This example shows the current time updated every second:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.H1(id="date-time-title"),
        dcc.Interval(id="clock", interval=1000)
    ]
)


app.clientside_callback(
    """
    function(n) {          
        const local_time_str = new Date().toLocaleTimeString();                   
        return "The current time is: " + local_time_str
    }
    """,
    Output('date-time-title', 'children'),
    Input('clock', 'n_intervals'),
)



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

thanks, had no idea functionality like this was possible and wondering what else is possible using app.clientside_callback

4

@AnnMarieW I have a multi-page app. Is there a way to apply this to multiple outputs or do I have to make one per page? I tried making Output a list and it didn’t work and see nothing to this effect on Clientside Callbacks | Dash for Python Documentation | Plotly

5

@marketemp I’ve used this in different tabs, but not in a multi page app yet. I don’t think it should be a problem.

Here is an example with two Outputs:


import dash
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.H1(id="title1",),
        html.H1(id="title2",)
    ]
)


app.clientside_callback(
    """
    function(id) {          
        const local_date_str = new Date().toLocaleString();                   
        return ["Title 1 date: " + local_date_str, 
                "Title 2 date: " + local_date_str]
    }
    """,
    Output("title1", "children"),
    Output("title2", "children"),
    Input("title1", "id")
)


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

this example works great on a single page. I originally put a around the outputs like a normal @app.callback. However it still didn’t work for my multipage and I cannot gather why