Turn UTC dates to local Timezone with Javascript

turn-utc-dates-to-local-timezone.md

Turn UTC Dates to Local Timezone with Javascript

Here's the snippet of HTML that can be used to call this file:

<script src="/js/turn-utc-dates-to-local-timezone.js" type="text/javascript"></script>

And here's the JS file turn-utc-dates-to-local-timezone.js:

const dates = document.getElementsByClassName('date-meta')
const monthNames = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
]

for (let counter = 0; counter < dates.length; counter++) {
  const htmlDate = dates[counter]
  const dateArrayByDigit = htmlDate.innerHTML.trim().split(/[^0-9]/)
  const dateArrayBySpace = htmlDate.innerHTML.split(' ')
  const timezoneAsDigit = dateArrayBySpace[dateArrayBySpace.length - 1]
  let localDate = null

  if (timezoneAsDigit === '+0000') {
    // Get the local date when it's written as in UTC timezone
    localDate = new Date(
      Date.UTC(
        dateArrayByDigit[0], dateArrayByDigit[1] - 1, dateArrayByDigit[2],
        dateArrayByDigit[3], dateArrayByDigit[4], dateArrayByDigit[5]
      )
    )
  } else {
    // Get the written date in the local timezone (which may not be written timezone)
    const writtenDate = new Date(
      dateArrayByDigit[0], dateArrayByDigit[1] - 1, dateArrayByDigit[2],
      dateArrayByDigit[3], dateArrayByDigit[4], dateArrayByDigit[5]
    )

    // Convert written date in local timezone to UTC timezone
    const utcDateAsNumbers = writtenDate.getTime() - (timezoneAsDigit * 60 * 60 * 10)
    const utcDate = new Date(utcDateAsNumbers)
    const utcDay = utcDate.getDate()
    const utcHour = utcDate.getHours()
    const utcMilliseconds = utcDate.getMilliseconds()
    const utcMinute = utcDate.getMinutes()
    const utcMonth = utcDate.getMonth()
    const utcYear = utcDate.getFullYear()

    // Get the local date when it's written as in UTC timezone
    localDate = new Date(
      Date.UTC(utcYear, utcMonth, utcDay, utcHour, utcMinute, utcMilliseconds)
    )
  };

  const day = localDate.getDate()
  const monthIndex = localDate.getMonth()
  const year = localDate.getFullYear()
  htmlDate.innerHTML = monthNames[monthIndex] + ' ' + day + ', ' + year
};

Notes

This will take all of the dates on the HTML page (written with a specific class date-meta), and will render them in the readers' local time, instead of in UTC.

An incoming date/time will be formatted like this:

2019-12-29 03:00:00 +0000

And it will be turned into this (CST):

Sat Dec 28 2019 21:00:00 GMT-0600

And written like this:

December 28, 2019