How to format dates with vanilla JavaScript

A lot of JavaScript developers reach for a library like date-fns when working with dates in JavaScript. Although a library like date-fns provides a lot of functionality, you may not even need it. For example, you can use the built-in JavaScript Date method toLocaleString() to format a timestamp like 2022-03-21T14:18:40.360+00:00 from MongoDB into a readable format like Monday, March 21, 2022.

In this lesson, we’ll cover the toLocaleString method and write our own utility function to convert timestamps into a readable format.

Watch lesson

toLocaleString overview

The toLocaleString() method is only available on the Date object. Therefore, you will need to convert a timestamp from your database into a Date object before calling the method like so:

const time = '2022-03-24T17:12:40+00:00' // ISO 8601

const convertedTime = new Date(time)

The toLocaleString() method returns a string and accepts two arguments: a locale string and an options object.

The locale string is a BCP 47 language tag that sets a language-sensitive format convention for the date. For example, by setting the value to en-us the date will be formatted for English speakers in the United States. The default language for the browser will be used if you do not pass the locale string into the function.

Below you can see the output for a timestamp when only passing in the locale argument:

const time = '2022-03-24T17:12:40+00:00' // ISO 8601

const convertedTime = new Date(time).toLocaleString('en-us')

console.log(convertedTime) // "3/24/2022, 1:12:40 PM"

The options object is where you’ll convert a time into the desired readable format. The Mozilla DateTimeFormat documentation outlines all the possible values that you can use with the toLocaleString() method.

Below are some examples of different formatting options and outputs:

const time = '2022-03-24T17:12:40+00:00' // ISO 8601

const convertedTimeOne = new Date(time).toLocaleString('en-us', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
})

console.log(convertedTimeOne) // "March 24, 2022"

const convertedTimeTwo = new Date(time).toLocaleString('en-us', {
  year: '2-digit',
  month: 'short',
  day: '2-digit',
  weekday: 'short',
})

console.log(convertedTimeTwo) // "Thu, Mar 24, 22"

const convertedTimeThree = new Date(time).toLocaleString('en-us', {
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  weekday: 'long',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
})

console.log(convertedTimeThree) // "Thursday, Mar 24, 2022, 01:12 PM EDT"

convertTime function

Now that you have a grasp of how the toLocaleString() method works, let’s write a utility function that you can use throughout your project to convert times into your desired format:

const convertTime = time => {
  return new Date(time).toLocaleDateString('en-us', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

This function takes one argument, time, which is the timestamp that comes from our database. Then the function converts the time variable into a new Date object before calling the toLocaleString() method.

The locale string is set to en-us and the options are set to return the year formatted as 2022, the month formatted as March, and the day formatted as 21.

Conclusion

If your application only requires simple date formatting you may be fine with vanilla JavaScript and the built-in toLocaleString() method. Otherwise, turn to the date-fns library for extra functionality.