Display DateTime in user's timezone

GoulvenClech

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

13 comments

/phoenix #datetime #timezones

2 4708 13

2022-02-05 13:09:45 UTC

First 10 of 13 Posts

LostKobrakai

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.

Post #1

mathieuprog

Note that Temporal is coming to JavaScript for all your date needs: GitHub - tc39/proposal-temporal: Provides standard objects and functions for working with dates and times. · GitHub

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

Post #2

kip

ex_cldr Core Team

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

Post #3

mindok

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

Post #4

GoulvenClech

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

Post #5

LostKobrakai

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.

Post #6

karlosmid

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"]) %>

Post #7

kokolegorille

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

Post #8

HappyBee

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

Post #9

baldwindavid

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.

Post #10

Load more posts (3 remaining)