is there a way for Dash to display time in the correct time zone of the browser?
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)
thanks, had no idea functionality like this was possible and wondering what else is possible using app.clientside_callback
@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
@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)
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