Displaying UTC DateTime in users browser TimeZone

Phoenix Forum Questions / Help
1

Hi! I want to display lots of DateTime struct in users local timezone. Is there a standard way of doing that?
I see two options:

  • getting users timezone in plug and then rendering dates server-side (but I am not sure how to get the timezone from browser to assigns)
  • output the time in UTC 2020-01-18 01:03:46Z and then do the magic in JS

Is there a preferred way of doing it?

I know there were a couple of similar questions already, but they were usually about saving the date-time in the DB.

2

Unfortunately the first approach will not work, since browsers do not usually send information about their computerā€™s configured timezone to the server.
This pretty much leaves the second approach as the only possibility.

I believe that there exist many drop-in libraries that allow you to display datetimestamps in a particular timezone in pure browser-friendly JS.
Iā€™ve used moment.js before myself in the past, but it is by no means the only option out there.

3 Likes
3

BCP47 defines a U extension to the language identifier that is defined in CLDR and is used in the HTTP Accept-Language header. So if the user selects an appropriate language identifier, the requested time zone can be transmitted. As an example en-AU-u-tz-ausyd-ms-metric-fw-mon means ā€œenglish as spoken in Australia with time zone for Sydney, measurement system metric and the first day of the week is Mondayā€.

Whilst totally supported in the standard its fair to say that its not an extension often used and probably unreasonable to ask a browser user to do it this way. Totally reasonable to ask an API client to do it though.

1 Like
4

My approach relies on the Timex library and the ECMAScript Internationalization API:

When a request comes in, I check get_session(conn, ā€œtmznā€). If tmzn is not yet part of my session, I add data-tmzn=ā€œ1ā€ to my document head. JS then checks document.head.dataset.tmzn on DOMContentLoaded and, if it returns a value, it sends an async GET request to:

ā€œ/timezone?iana=ā€ + encodeURIComponent(Intl.DateTimeFormat().resolvedOptions().timeZone)

Once the server receives this, the timezone can be added to the session, following its verification by calling Enum.member?(Timex.timezones(), iana). From that point onwards, all dates can be rendered server-side with the help of Timex.

This approach may or may not fit your use case, the most obvious issue being that it does not work (at least not out of the box) for the initial page shown to the user.

2 Likes
5

Thanks!

That was very valuable information! For now, I hacked JQuery+moment solution solution:

let convert_dates = function() {
  $(".utc_to_local").text(function(index, utc_date) {
    return moment.utc(utc_date).local().format('YYYY-DD-MM HH:mm:ss');
  });
};

# for live views
$(document).on("phx:update", convert_dates);
# for regular views
$(document).ready(convert_dates);

But I think Iā€™ll change it later. When I have signing in, Iā€™d like to get timezone from browser via login form and then save it in session. This way, I can format dates server side which wonā€™t require two additional JS libs.

6

Iā€™d just like to note that if youā€™re dealing with timezones then you may be dealing with different cultures and languages. Which also means that the users expectation of date/time format may also be differentā€¦

2 Likes
7

Have you put this sort of functionality into a plug? This sounds incredibly useful!

8

Unless the browser sends the userā€™s timezone in a header or something, the backend has no way of knowing what the userā€™s timezone is.

9

I am no expert, but this appeared to generate my timezone when I tried calling it in browser console.

Intl.DateTimeFormat().resolvedOptions().timeZone # returned ā€œAmerica/Denverā€

I am no expert on the API here, but it appeared to work when I tried it.

10

Right, thatā€™s the browser. But the issue is, plug doesnā€™t run code in the browser, plug runs code on the server, so unless the browser sends that information to the server in the HTTP request, plug canā€™t do anything about it.

11

Yeah in @konstantineā€™s reply he built an endpoint to send that data on DOMContentLoaded to the backend.

When a request comes in, I check get_session(conn, ā€œtmznā€). If tmzn is not yet part of my session, I add data-tmzn=ā€œ1ā€ to my document head. JS then checks document.head.dataset.tmzn on DOMContentLoaded and, if it returns a value, it sends an async GET request to:
ā€œ/timezone?iana=ā€ + encodeURIComponent(Intl.DateTimeFormat().resolvedOptions().timeZone)

12

No plug involved, the JS-triggered GET request calls a controller function:

  def timezone(conn, %{"iana" => iana}) do
    cond do
      get_session(conn, "tmzn") -> text(conn, "action skipped")
      Enum.member?(Timex.timezones(), iana) -> conn |> put_session("tmzn", iana) |> text("action successful")
      true -> text(conn, "action failed")
    end
  end

Then a function like the one below may be called from any Phoenix view:

  def local_datetime(conn, datetime) do
    {datetime, prefix} = if tmzn = get_session(conn, "tmzn"), do: {Timex.Timezone.convert(datetime, tmzn), ""}, else: {datetime, "ā¦—UTCā¦˜ "}
    [prefix, Timex.format!(datetime, "{h24}:{m}:{s} on {Mshort} {D}, {YYYY}")] #   unrecognized timezone or no timezone information ā†‘
  end
13

I also prefer this approach of rendering UTC in the server and making the transformation to the userā€™s timezone in the client.

You may also want to take a look at github/time-elements, which can do this automatically for you using WebComponents.

3 Likes
14

In plain JavaScript it could possibly break down to the following:

<time id="updated-at" datetime="2020-06-30 12:21:17Z"></time>
<script>
  const element = document.getElementById('updated-at');
  element.innerText = new Date(element.getAttribute('datetime')).toLocaleString();
</script>

Edit: Thanks @LostKobrakai

2 Likes
15

Thereā€™s a <time> tag in html, which is more appropriate than a plain span.

2 Likes
16

Modified version Iā€™m using with LiveView now :

<time id="updated_at" datetime="2020-06-30 12:21:17Z"></time>
<span id="updated_at_view" phx-update="ignore"></span>
<script>
  const view_element = document.getElementById('updated_at_view');

  document.addEventListener('phx:update', () => {
    const source_element = document.getElementById('updated_at');
    view_element.innerText = new Date(source_element.getAttribute('datetime')).toLocaleString();
  })
</script>