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

I also wanted to display a date using localized string settings, like toLocaleDateString() does, but using the date's UTC value, instead of the local time zone.

For example:

I do want the localized string format, but I also want the UTC value instead of the local time zone value. The desired output in this example would be 4/3/2019, instead of 4/2/2019.

---

I acknowledged @AndersonHappens suggestion, but I have not used it. Here is what I did, instead:

There is a getTimezoneOffset() function, which provides the local time zone offset.

We can use this function result and create a new Date, applying the diff. Then, we can use toLocaleDateString() directly, as usual, to get the date in localized string format:

The solution as a function could be like this:

function toLocaleUTCDateString(date, locales, options) {
    const timeDiff = date.getTimezoneOffset() * 60000;
    const adjustedDate = new Date(date.valueOf() + timeDiff);
    return adjustedDate.toLocaleDateString(locales, options);
}

Answer 2

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 3

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):

const usLocale = 'en-US'
new Date('Sat, 30 Mar 2019 00:27:19 GMT').toLocaleDateString(usLocale, {
  timeZone: 'UTC',
})
// '3/30/2019'

const ukLocale = 'en-GB'
new Date('Sat, 30 Mar 2019 00:27:19 GMT').toLocaleDateString(ukLocale, {
  timeZone: 'UTC',
})
// '30/03/2019'

Answer 4

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