Is there a function to get the UTC date in the Locale String Format?

Question

I want to get the current UTC date in JavaScript, but display it in the local date format (like Date.toLocaleDateString() does).

I first tried to just get the current UTC Date with Date.toUTCString() but that doesn't actually print out in the local format.

I then tried using the options configuration in toLocaleDateString(), but that just printed the local date and not the UTC date in the local format. e.g. new Date().toLocaleDateString(options = {timeZone: "UTC"})

I then tried formatting using Intl.DateTimeFormat(), but that just gives the same results as Date.toLocaleDateString() does.

If there was a way to get the locale format then I'd be happy to use that format to format the UTC Date, but as far as I can tell there is none.

For example, given the new Date("Sat, 30 Mar 2019 00:27:19 GMT"), In the US, I should print out "3/30/2019", in Europe I should print out "30/3/2019", and so on, for every supported locale.

However, new Date("Sat, 30 Mar 2019 00:27:19 GMT").toLocaleDateString(options = {timeZone: "UTC"}) will print out "3/29/2019" instead.

Answer 1

Given a date, you can get the locale format with new Intl.DateTimeFormat(). You can then use formatToParts in order to get the formatting of the date and each specific component.

Following the example in the formatToParts documentation, I created the following method to get the UTC date in the locale string.

function toLocaleUTCDateString(date) {
  let formatter = new Intl.DateTimeFormat();
  return formatter.formatToParts(date).map(({type, value}) => { 
    switch (type) {
      case 'day': return date.getUTCDate();
      case 'hour': return date.getUTCHours();
      case 'minute': return date.getUTCMinutes();
      case 'month': return date.getUTCMonth() + 1;
      case 'second': return date.getUTCSeconds();
      case 'timeZoneName': return "UTC";
      case 'year': return date.getUTCFullYear();
      default : return value; 
    } 
  }).reduce((string, part) => string + part);
}

Do note however that this method does not remember number versus string formatting. For example, if you want to display the month of March as "March" (or the specific language month string), and not as the number 3, you would have to figure out how to do that yourself. It also doesn't handle discrepancies in weekdays, so if the local date is "Friday" and the UTC Date is "Saturday", you would have to figure that out separately as well.

Answer 2

You almost got it right - the timeZone option is available in the second argument. The first argument to toLocaleDateString is for the locales.

This example from your question works when options are the second argument (and is much simpler than other answers):

new Date("Sat, 30 Mar 2019 00:27:19 GMT").toLocaleDateString(undefined, {timeZone: "UTC"})
// '3/30/2019'

Answer 3

var dateToPrint = new Date(Date.UTC(2020, 3, 23, 15, 0, 0));

new Date(
  dateToPrint.getUTCFullYear(),
  dateToPrint.getUTCMonth(),
  dateToPrint.getUTCDate(),
  dateToPrint.getUTCHours(),
  dateToPrint.getUTCMinutes(),
  dateToPrint.getUTCSeconds()
).toLocaleString('es-ES')

see image

Answer 4

Check out Intl.DateTimeFormat on MDN!

Using it is as simple as

// do this once in a central library file
const formatter = new Intl.DateTimeFormat('en', {
  timeZone: 'UTC',
  timeZoneName: 'short',
  month: 'short',
  day: '2-digit',
  hour12: false,
  hour: '2-digit',
  minute: '2-digit',
})

// reuse anywhere for consistency
const myDate = new Date(
  'Thu Feb 10 2022 12:50:14 GMT+0100'
)

formatter.format(myDate) === 'Feb 10, 11:50 UTC' // true

Open your console, copy-paste the code and start playing!

Again, Intl.DateTimeFormat on MDN.

Enjoy!

Answer 5

toLocaleString receives some parameters, the first parameter is the locale. To solve your issue specifically, you need to understand that UTC is not a locale. What you could to to accomplish what you want is to pass either 'en-US' for 3/29/2019 and 'en-GB' for 29/03/2019 hope that helps!