How to format a date in JavaScript

To format a date in JavaScript you have two options: use one of the built-in Date methods like toISOString() or toLocaleString(), or read the individual values with the getters and build the string yourself.

Let’s see both, given a Date object:

const date = new Date('July 22, 2018 07:22:13')

The built-in formatting methods

There are a few built-in methods that generate a string representing that date. I list them all, along with a comment that shows a sample output:

date.toString()
// "Sun Jul 22 2018 07:22:13 GMT+0200 (Central European Summer Time)"

date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)"

date.toUTCString() //"Sun, 22 Jul 2018 05:22:13 GMT"

date.toDateString() //"Sun Jul 22 2018"

date.toISOString() //"2018-07-22T05:22:13.000Z" (ISO 8601 format)

date.toLocaleString() //"22/07/2018, 07:22:13"

date.toLocaleTimeString()	//"07:22:13"

toISOString() is the one I use to store dates or send them to a server, because the format is unambiguous and sorts correctly as a string.

The toLocale* methods adapt to the user’s locale, so the output you see might differ from mine. You can also pass a locale explicitly, with options to control each part:

date.toLocaleDateString('en-US', {
  weekday: 'long',
  month: 'long',
  day: 'numeric',
  year: 'numeric'
})
// "Sunday, July 22, 2018"

This is the way to go when you show dates to users, because you get the right format for their language for free.

Get the individual values

You are not limited to those, of course - you can use more low level methods to get a value out of a date, and construct any kind of result you want:

date.getDate() //22

date.getDay() //0 (0 means sunday, 1 means monday..)

date.getFullYear() //2018

date.getMonth() //6 (starts from 0)

date.getHours() //7

date.getMinutes() //22

date.getSeconds() //13

date.getMilliseconds() //0 (not specified)

date.getTime() //1532236933000

date.getTimezoneOffset() //-120 (will vary depending on where you are and when you check - this is CET during the summer). Returns the timezone difference expressed in minutes

Build a custom format

Say you want a YYYY-MM-DD string. Combine the getters with padStart() to keep the leading zeros:

const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')

`${year}-${month}-${day}` //"2018-07-22"

Be careful with getMonth(). It starts from 0, so July is 6. Forgetting the + 1 is the classic bug here: your dates all show the previous month, and everything else looks fine. Always add 1 when you display the month.

The UTC versions

Those getters all depend on the current timezone of the computer. There are equivalent UTC versions of these methods, that return the UTC value rather than the values adapted to your current timezone:

date.getUTCDate() //22
date.getUTCDay() //0 (0 means sunday, 1 means monday..)
date.getUTCFullYear() //2018
date.getUTCMonth() //6 (starts from 0)
date.getUTCHours() //5 (not 7 like above)
date.getUTCMinutes() //22
date.getUTCSeconds() //13
date.getUTCMilliseconds() //0 (not specified)

Use these when you need the same output regardless of where the code runs, for example on a server generating reports for users in different timezones.

If you want ready-made formatting code for a specific output, I built a free date formatting tool that generates Intl, date-fns and Temporal snippets for you.