[ ← blog / javascript ](/) Apr 29, 2021  ·  \#javascript  ·  2 min read 

# Formatting time elements to match the current user's locale



I recently created a [**Live**](/live "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:

```xml
<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 `<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a>` object. We can take the value from the `datetime` attribute and pass it to the `Date` object's constructor to create a new object.

```javascript
(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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)
- [Date.prototype.toLocaleDateString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString)
- [Date.prototype.toLocaleTimeString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString)

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

```javascript
(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:

```javascript
<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>

  

  

  ![](/themes/custom/mglaman/images/headshot.webp)Thanks for reading

I write about Drupal, PHP, and the quiet infrastructure behind large sites — caching, config, and testing. New posts land every week or two.

 [Subscribe via RSS →](/rss.xml) [About me →](/about-me) 

 



 

  [← Older

Migrating to TailwindCSS, iteratively, in your Drupal theme

 ](/blog/migrating-tailwindcss-iteratively-your-drupal-theme) [Newer →

Adding CodePen oEmbeds to your Drupal site

 ](/blog/adding-codepen-oembeds-your-drupal-site)