Get Date and Time in User's locale format in JavaScript

Get Date and Time in User's locale format in JavaScript #

Use the toLocaleString() method to get a date and time in the user's locale format, e.g. date.toLocaleString(). The toLocaleString method returns a string representing the given date according to language-specific conventions.

Copied!
const date = new Date();

console.log(date); // 👉️ Sun Jan 23 2022 14:30:53

console.log(date.toLocaleString()); // 👉️ "1/23/2022, 2:30:53 PM"

console.log(date.toLocaleDateString()); // 👉️ "1/23/2022"

console.log(date.toLocaleTimeString()); // 👉️ "2:30:53 PM"

We used the toLocaleString method to get a language sensitive representation of a date.

The format for the examples above might differ in your case.

The toLocaleString method takes 2 parameters:

1. locales - a string with a BCP 47 language tag or an array of such strings. You can use any of the available locales, e.g. es-MX for Mexico or en-CA for Canada. If you need more information about this parameter, check out the MDN docs.
2. options object where we can influence how the date is formatted. Read more about the options object in the MDN docs.

To use the browser's default locale, you can either pass no value for the locales parameter, or pass an empty array.

Copied!
const date = new Date();

console.log(date); // 👉️ Sun Jan 23 2022 14:30:53

console.log(date.toLocaleString()); // 👉️ "1/23/2022, 2:30:53 PM"

// ✅ same as above (use browser's locale)
console.log(date.toLocaleString([])); // 👉️ "1/23/2022, 2:30:53 PM"

Here is an example that uses the options object to display a more verbose representation of the date and time in the user's locale.

Copied!
const date = new Date();

console.log(date); // 👉️ Sun Jan 23 2022 14:30:53

// 👇️ Sunday, January 23, 2022 at 2:30:53 PM Eastern European Standard Time
console.log(
  date.toLocaleString([], {
    dateStyle: 'full',
    timeStyle: 'full',
  }),
);

We set the dateStyle and timeStyle properties in the options object to full to get a more verbose representation of the date and time.

Other possible values for the two properties are: long, medium and short.

Copied!
const date = new Date();

console.log(date); // 👉️ Sun Jan 23 2022 14:30:53

// 👇️ Jan 23, 2022, 2:30 PM
console.log(
  date.toLocaleString([], {
    dateStyle: 'medium',
    timeStyle: 'short',
  }),
);

Here we set the dateStyle property to medium and the timeStyle property to short.

If you only need to get the date formatted according to the user's locale, use the toLocaleDateString method.

Copied!
const date = new Date();

console.log(date); // 👉️ Sun Jan 23 2022 14:30:53

console.log(date.toLocaleDateString()); // 👉️ "1/23/2022"

// ✅ same as above (use user's default locale)
console.log(date.toLocaleDateString([])); // 👉️ "1/23/2022"

The toLocaleDateString also takes the locales as the first parameter and an options object as the second.

If you only need the time, formatted according to the user's locale, use the toLocaleTimeString method.

Copied!
const date = new Date();

console.log(date); // 👉️ Sun Jan 23 2022 14:30:53

console.log(date.toLocaleTimeString()); // 👉️ "2:30:53 PM"

// ✅ same as above (use user's default locale)
console.log(date.toLocaleTimeString([])); // 👉️ "2:30:53 PM"

The two examples above achieve the same result. They both show the time formatted according to the user's default locale.