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
};
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