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

2022-02-05 13:09:45 UTC

Showing Posts 13 to 4

Show Best Posts
Show All (oldest first)
Show All (newest first)

Nicd

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

Post #13

kip

ex_cldr Core Team

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.

Post #12

stefanchrobot

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

Post #11

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

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

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

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