A Valid HTML Datetime

Semantically, if you have a date or time on a web page, you should probably be wrapping it in a <time> element and providing a machine-readable equivalent, for example:

<p><time datetime="2023-01-20">20th January 2023</time></p>

That seems simple enough, but most of the time your date^[1] will already be in the format you want to use in your final text (i.e. human-readable) or in some obtuse ISO standard coming out of an API or database. And yet the HTML datetime attribute pretty much only accepts the YYYY-MM-DD format (and relevant subsets e.g. YYYY-MM). Plus, as everyone knows, date conversions in JavaScript are not that – shall we say – simple 😂

The culmination of all of the above means that I routinely find myself juggling various variations of toLocaleString(), getDate(), and all the other myriad date functions, desperately trying to work out which specific combination of arcane symbols will produce the desired output. Today was one of those days, and after yet another half-hour wasted rummaging through old codebases and Stack Overflow, I figured I'd write myself a short note to reference next time – and so here we are 😉

Caveat: there are probably multiple solutions to this problem^[2]. I do not make any claims that the way documented here is a best practice, ultra-performant, 10x programmer trick. It just works. (If there is a better path, please let me know and I'll add an update.)

The Solution

It turns out that the YYYY-MM-DD format is also the international format for Swedish dates, so we can piggyback on the JavaScript Intl() API with its DateTimeFormat() function.

Assuming you're using some kind of templating language that allows inline JavaScript functions (e.g. JSX or Astro) then here's the pattern I use:

<time dateTime={new Intl.DateTimeFormat("sv-SE").format(new Date(date)).toString()}>
    {date}
</time>

Otherwise, you can split that out into a <script> element or (preferably) perform the conversion on the back end. The steps would be identical:

1. Create a new Intl datetime object, set to Swedish;
2. Pass it your date to format (converted to a Date object for type safety);
3. Then convert to a string value, which is what the HTML datetime attribute expects.

As I say, there is probably a better way to do this. Converting a single variable to a Date, then an Intl datetime object, and then a string definitely feels ridiculous. But then again, JavaScript and dates, eh‽ 😅