CODEWITHSUNDEEP
javascriptdate
AndersonHappens
AndersonHappens

Reputation: 547

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

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.

Upvotes: 13

Views: 19650

Answers (7)

Andrew Marquez
Andrew Marquez

Reputation: 230

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'

Upvotes: 12

Dante Nuñez
Dante Nuñez

Reputation: 521

Inside the toLocaleDateString you can pass options. There is an option name TimeZone. You have to set it to 'UTC'

const dateToParse = new Date()
dateToParse.toLocaleDateString(locate, { timeZone: 'UTC' })

Upvotes: 1

Martin Grönlund
Martin Grönlund

Reputation: 333

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!

Upvotes: 0

AndersonHappens
AndersonHappens

Reputation: 547

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.

Upvotes: 3

Rafael
Rafael

Reputation: 11

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

Upvotes: 1

J. Bruni
J. Bruni

Reputation: 20492

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:

Localized UTC date problem

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:

Localized UTC date solution

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

Upvotes: 10

Jose Munoz
Jose Munoz

Reputation: 558

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!

Upvotes: -1

Related Questions