How to Format a JavaScript Date?

Formatting dates is something that we have to do a lot in JavaScript apps.

In this article, we’ll look at how to format dates with JavaScript.

The Intl.DateTimeFormat Constructor

The easiest way to format a date is with the Intl.DateTimeFormat constructor.

It returns an object with the format method.

For instance, we can write:

const date = new Date()
const dateFormat = new Intl.DateTimeFormat('en');
const formattedDate = dateFormat.formatToParts(date);
console.log(formattedDate)

The formatToParts method will get the parts of the date object as an array.

As a result, we get:

[
  {
    "type": "month",
    "value": "2"
  },
  {
    "type": "literal",
    "value": "/"
  },
  {
    "type": "day",
    "value": "12"
  },
  {
    "type": "literal",
    "value": "/"
  },
  {
    "type": "year",
    "value": "2021"
  }
]

as the value of formattedDate .

Then we can combine the values the way we like in a string.

To do that, we write:

const date = new Date()
const dateFormat = new Intl.DateTimeFormat('en');
const formattedDate = dateFormat.formatToParts(date);
const formattedDateObj = formattedDate.reduce((formattedDateObj, {
  type,
  value
}) => ({
  ...formattedDateObj,
  [type]: value
}), {});
console.log(`${formattedDateObj.year}-${formattedDateObj.month}-${formattedDateObj.day}`)

We create the formattedDateObj object from the array by calling reduce with a callback.

The callback takes the formattedDateObj , which is the object we have created so far.

The 2nd parameter is an object with the type and value properties from the array.

We return an object with a copy of the formattedDateObj object with the new property added to it at the end.

The 2nd argument of reduce is an empty object.

We set it to an empty object, so we can convert the entries of the formattedDate array and put it into the empty object.

Then we can combine the properties into our own date string as it’s done in the last line.

Another way to get the parts of a date is to extract the parts of a date individually.

For instance, we can write:

const d = new Date();
const ye = new Intl.DateTimeFormat('en', {
  year: 'numeric'
}).format(d);
const mo = new Intl.DateTimeFormat('en', {
  month: 'short'
}).format(d);
const da = new Intl.DateTimeFormat('en', {
  day: '2-digit'
}).format(d);
console.log(`${da}-${mo}-${ye}`);

We use the IntlDateTimFormat constructor with the locale and an object to specify how we format the object as arguments.

'numeric' returns the 4 digit year.

'short' returns a month abbreviation.

And '2-digit' returns the 2 digit date.

So we should get something like:

'12-Feb-2021'

returned.

The toLocaleDateString Method

The toLocaleDateString method also lets us format a date easily.

For instance, we can write:

const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};
const today = new Date();
console.log(today.toLocaleDateString("en-US", options));

We have the options object to specify how a date is formatted.

The options are the same as in the previous example.

toLocaleString takes the locale and the options as arguments.

Therefore, we get:

'Friday, February 12, 2021'

Conclusion

We can format JavaScript date objects easily with the Intl.DateTimeFormat constructor or the toLocaleDateString method.