Форматирование элементов времени в соответствии с локалью текущего пользователя

Недавно я создал страницу Прямые трансляции, чтобы продвигать мои предстоящие живые потоки кодирования и способы найти мои предыдущие. У меня указано время. Однако времена тяжелые. Сначала я отправил их без указания часового пояса CDT — извините, ребята. Но все же, это боль и недружественно для любого в другом часовом поясе.

Черт возьми, мне даже трудно перевести 24-часовой формат времени из EDT в CDT, не говоря уже о UTC. Поэтому я написал немного ванильного JavaScript, чтобы преобразовать время в языковой стандарт текущего пользователя — никаких зависимостей!

Drupal выводит свои поля даты и времени в элементе time с атрибутом datetime, который содержит строку даты и времени. Вот пример:

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

Мы можем использовать свойство datetime, чтобы изменить содержимое элемента, чтобы оно было отформатировано в соответствии с локалью текущего пользователя. Все, что нам нужно сделать, это использовать объект Date. Мы можем взять значение из атрибута datetime и передать его конструктору объекта Date для создания нового объекта.

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

Довольно легко, да? Тогда нам просто нужно использовать методы локали:

• Дата.прототип.toLocaleString()
• Дата.прототип.toLocaleDateString()
• Дата.прототип.toLocaleTimeString()

Я хотел контролировать формат, поэтому использовал литерал шаблона для создания собственного формата:

(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'
    })}`;
  })
})();

Для себя я получаю такой элемент времени:

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

Это делает для приятного улучшения. Это то, что я хотел бы, чтобы больше сайтов конференций и мероприятий делали.

К сожалению, я понятия не имею, как проверить это в Chromium (Brave, Chrome) Dev Tools для разных локалей или часовых поясов. Вы можете многое сделать, но я не вижу способа смоделировать другую локаль или часовой пояс. Если вы знаете способ, дайте мне знать!