Display DateTime in user's timezone

Phoenix Forum Questions / Help
,
1

Hi everyone!

I work for a French company and, with our marine territories, our customers live in many timezones. So I’m wondering what is, in 2022, the correct way to display dates in browser timezone with Phoenix?

I saw on a topic of 2020 this solution:

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

Is this really the best solution? Shouldn’t I use a hook? Isn’t there an elixir solution?

Thanks for your help :slight_smile:

1 Like
2

The reason to do it in JS is that the server doesn’t know or need to know the timezone. If the server is already aware of the users timezone however you can surely handle that in elixir as well.

2 Likes
3

Note that Temporal is coming to JavaScript for all your date needs: https://github.com/tc39/proposal-temporal

There is a polyfill and its API is pretty stable now.

4

12 different timezones for France and its overseas territories! And a huge longitudinal span as well!

2 Likes
5

Interesting. China would be easier for programmers, but who wants it to get light at 3.05am? Or 9:40am for that matter. Time in China - Wikipedia

6

What do you think would be the easiest and cleanest way to retrieve the browser’s time zone in Elixir?

7

You need to figure out a way for the browser to supply it to the server. There are many ways to accomplish that depending on your setup.

8

Hi!

This script tag is what I have in layout/app.html.eex

<body class="background-light">
    <div id="main"><script>document.cookie = "_testivator_timezone="+Intl.DateTimeFormat().resolvedOptions().timeZone;</script>

And a call in other template:

<%= @conn.cookies["_testivator_timezone"]) %>

1 Like
9

If You use liveview, You can set timezone, timezone_offset in the live socket, this way You can retrieve this information server side, and do the translation in the server.

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: Hooks,
  params: {
    _csrf_token: csrfToken,
    locale: Intl.NumberFormat().resolvedOptions().locale,
    // timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    // USE POLYFILL FOR IE11
    timezone: moment.tz.guess(),
    timezone_offset: -(new Date().getTimezoneOffset() / 60),
  }
});

But as other have also mentionned, I prefer to do it client side :slight_smile:

14 Likes
10

not sure it would help you, but below JavaScript code results in producing the date and time in user’s time zone… just give it a try in the browser’s console tab.

new Date("2020-06-30 12:21:17Z")

11

This is what I do. Admittedly, it felt a little strange at first, but since Liveview is mostly replacing javascript in my app, it made sense to bring knowledge of the user’s timezone to the Elixir side. I’m also doing a lot more with calendaring than just displaying the user’s time though. If my needs were simple enough, I’d probably still just stick with displaying via javascript.

1 Like
12

I think the cleanest way is to have a setting in the UI where the user can configure it.

4 Likes
13

I too think that whatever timezone you think the user wants dates/times displayed in, give them an option to tell you what they want. Assuming browser timezone, or timezone based on IP address or locale or some other automated mechanism can create a worse experience. Let say I’m living in Singapore but travelling in the US and trying to schedule a meeting for when I get back. I don’t want dates/times to be rendered based upon where I am, but based upon where I’m going.

7 Likes
14

Wow, this is actually a really useful snippet. Thanks!