I recently created a Live page to promote my upcoming live coding streams and ways to find my previous ones. I have the times listed. However, times are hard. I first shipped them without specifying the CDT timezone – sorry folks. But still, this is a pain and unfriendly to anyone in a different timezone.

Heck, I even have a hard time translating 24h time format from EDT to CDT, let alone UTC. So I wrote some vanilla JavaScript to transform the times into the current user's locale – no dependencies! 

Drupal outputs its datetime fields in a time element with the datetime attribute, which contains the datetime string. Here's an example:

<time datetime="2021-04-27T19:00:00Z">Tue, 04/27/2021 - 2:00PM CDT</time>

We can use the datetime property to alter the element's content to be formatted to the current user's locale. All we need to do is use the Date object. We can take the value from the datetime attribute and pass it to the Date object's constructor to create a new object.

(function () {
  document.querySelectorAll('time').forEach((el) => {
    const date = new Date(el.dateTime);
  })
})();

Pretty easy, yeah? Then we just need to use the locale methods: 

• Date.prototype.toLocaleString()
• Date.prototype.toLocaleDateString()
• Date.prototype.toLocaleTimeString()

I wanted to control the format, so I used a template literal to construct my own format:

(function () {
  document.querySelectorAll('time').forEach((el) => {
    const date = new Date(el.dateTime);
    el.innerText = `${date.toLocaleString(navigator.language, {
      weekday: 'short'
    })}, ${date.toLocaleDateString(navigator.language)} - ${date.toLocaleTimeString(navigator.language, {
      hour: 'numeric',
      minute:'2-digit',
      timeZoneName: 'short'
    })}`;
  })
})();

For myself, I then end up with a time element like this:

<time datetime="2021-04-27T19:00:00Z">Tue, 4/27/2021 - 2:00 PM CDT</time>

This makes for a nice enhancement. It's something I wish more conference and event sites would do.

Unfortunately, I have no idea how to test this in Chromium (Brave, Chrome) Dev Tools against different locales or timezones. There is a lot you can do but I'm not seeing a way to simulate a different locale or timezone. If you know of a way, let me know!

I've created a CodePen for this code: https://codepen.io/mglaman/pen/oNBRMeW