Ian Bradbury

August 19, 2021

How to display HTML client rendered localised date/time values

How to display date/time, localised with only a small - manageable - amount of JavaScript?

Scenario = you need to display some date/time data from your server that gets localised as the browser page is rendered.  All without having to stress about user timezones or any daylight saving that might be in effect.

CHECK : All our servers run in UTC.  Yes?

We’ll make use of 2 libraries.  AlpineJS and d3-time-format.  Alpine for the JS smarts and d3…. for the date/time formatting.

I will assume that you have already included the two libraries in the page head, or via some Web Packer type build/embeding.

Here's the line of HTML that will display the localised value: 

<div x-data="{ d: new Date('2020-11-16T14:35:34Z') }"
     x-html="d3.timeFormat('%e %b %Y - %I:%M %p')(d)">
</div>

Lets break this down.

x-data="{ d: new Date('2020-11-16T14:35:34Z') }"

AlpineJS initialisation, sets up an alpine scope and defines a data value, d.  The value contains a date in the ISO8601 format.  

For Rails developers you can achieve an ISO8601 formatted date by appending .iso8601 when you output dates.  Example:  <%= @invoice.date_due.iso8601 %>.

x-html="d3.timeFormat('%e %b %Y - %I:%M %p')(d)"

x-html is an AlpineJS directive that specifies either a js snippet or string that is placed into the innerHTML of the containing DIV as the page is loaded.  

d3.timeFormat('%e %b %Y - %I:%M %p')

d3 method that creates a date/time formatter object that is used to format the value d.

Whats best about this method is that there is no requirement to consider timezones or daylight saving.  Because we send UTC date/times and becuase we use the browser to present the correct date/time everything is taken care of.

Source HTML:

<div x-data="{ d: new Date('2020-11-16T14:35:34Z') }" x-html="d3.timeFormat('%e %b %Y - %I:%M %p')(d)"></div>

Rendered Output:

<div>16 Nov 2020 - 14:35 pm</div>

Links: