# Display correct time in browsers timezone

**URL:** <https://community.plotly.com/t/display-correct-time-in-browsers-timezone/49789>\
**Category:** Dash Python\
**Created:** [February 7, 2021, 7:12pm UTC](https://community.plotly.com/t/display-correct-time-in-browsers-timezone/49789 "2021-02-07T19:12:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![marketemp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/marketemp/32/11523_2.png) [@marketemp](https://community.plotly.com/u/marketemp)\
**Post date:** [February 7, 2021, 7:12pm UTC](https://community.plotly.com/t/display-correct-time-in-browsers-timezone/49789/1 "2021-02-07T19:12:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 7, 2021, 11:12pm UTC](https://community.plotly.com/t/display-correct-time-in-browsers-timezone/49789/2 "2021-02-07T23:12:26Z")

</div>

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:**

```auto

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:**

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![marketemp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/marketemp/32/11523_2.png) [@marketemp](https://community.plotly.com/u/marketemp)\
**Post date:** [February 8, 2021, 5:48am UTC](https://community.plotly.com/t/display-correct-time-in-browsers-timezone/49789/3 "2021-02-08T05:48:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marketemp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/marketemp/32/11523_2.png) [@marketemp](https://community.plotly.com/u/marketemp)\
**Post date:** [February 10, 2021, 12:13am UTC](https://community.plotly.com/t/display-correct-time-in-browsers-timezone/49789/4 "2021-02-10T00:13:49Z")

</div>

@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](https://dash.plotly.com/clientside-callbacks)

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [February 10, 2021, 12:46am UTC](https://community.plotly.com/t/display-correct-time-in-browsers-timezone/49789/5 "2021-02-10T00:46:34Z")

</div>

@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:

```auto

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)

```

---

<div class="post-metadata">

**Author:** ![marketemp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/marketemp/32/11523_2.png) [@marketemp](https://community.plotly.com/u/marketemp)\
**Post date:** [February 10, 2021, 4:30pm UTC](https://community.plotly.com/t/display-correct-time-in-browsers-timezone/49789/6 "2021-02-10T16:30:17Z")

</div>

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