Skip to content

Instantly share code, notes, and snippets.

@emmahsax
Last active July 5, 2022 04:11
Show Gist options
  • Save emmahsax/e2494666bd1d9a89451f8584e3c04fad to your computer and use it in GitHub Desktop.
Save emmahsax/e2494666bd1d9a89451f8584e3c04fad to your computer and use it in GitHub Desktop.
Turn UTC dates to local Timezone with Javascript

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment