Format Date and Time with JavaScript

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.

How Can I Format Date and Time in JavaScript?

Suppose we have a Date object in a variable called now

const now = new Date();

If we log this now variable in the console, we'll see an unformatted string of our location specific current date and time with many unnecessary information being printed out.

console.log(now)
// Sun Dec 13 2020 10:38:06 GMT+0600 (Bangladesh Standard Time)

We can use the DateTimeFormat constructor of Intl object to quickly format the now Date object for us and return a formatted date string

const formatDateInBangla = new Intl.DateTimeFormat('bn-BD').format(now);

console.log(formatDateInBangla);
// ১৩/১২/২০২০

The DateTimeFormat constructor can take two parameters; locale or default date formatting for language and an options object. We'll talk about the options object soon.

We're going to write the same code snippet as last time with a slight change, we're going to set the locale to en-GB or British English instead of bn-BD or Bangla (Bangladesh).

const formatDateInEnglish = new Intl.DateTimeFormat('en-GB').format(now);

console.log(formatDateInEnglish);
// 13/12/2020

Using the Options Object

The options object can take some or all of the following properties described here.

To keep this tutorial short, we're only going to use dateStyle
and timeStyle options.

Using dateStyle

The date formatting style has four possible values:

• 'full'
• 'long'
• 'medium'
• 'short'

This time we're going to pass an option object with dateStyle as a key and 'full' as its value.

const option = {
  dateStyle: 'full',
}

const formatDate = new Intl.DateTimeFormat('en-GB', option).format(now);

console.log(formatDate);
// Sunday, 13 December 2020

Remember when we talked about the DateTimeFormat constructors ability to take in two arguments? Well, look closely, we've passed in the option object we created.
That option object is telling the constructor to format the now date object in full form in British standard (passed in as locale).

Cool! Now it's time for you to test out the other three values of the dateStyle and see what they returns!

Using timeStyle

The time formatting style have the same four possible values as the dateStyle property.

Our now variable, which is a date object, contains information about the time it was created at.
This time we're going to format the now variable using the timeStyle property as the only option and see what it returns to us.

const formatTime = new Intl.DateTimeFormat('en-GB', {timeStyle: 'short'}).format(now);
// You can pass in the option object inline!

console.log(formatTime);
// 11:38

Well, that's not so pretty, is it? Is it day or night?

Let's try something else.

const options = {
  timeStyle: 'short',
  hour12: true,
}
// Obviously you can pass multiple options

const formatTimeNotUgly = new Intl.DateTimeFormat('en-GB', options).format(now);

console.log(formatTimeNotUgly);
// 11:43 am

I hope you now understand how the Intl.DateTimeFormat constructor works, please read this MDN Documentation for an in depth understanding of Intl.DateTimeFormat.