Sometimes, we’ve to format our JavaScript date objects into strings in YYYY-MM-DD format.

In this article, we’ll look at how to format a JavaScript date into YYYY-MM-DD format.

Extract the Parts of a Date and Put Them Together

One way to format a JavaScript date into the YYYY-MM-DD format is to extract the parts of a date and put them together.

For instance, we can write:

const formatDate = (date) => {
  let d = new Date(date);
  let month = (d.getMonth() + 1).toString();
  let day = d.getDate().toString();
  let year = d.getFullYear();
  if (month.length < 2) {
    month = '0' + month;
  }
  if (day.length < 2) {
    day = '0' + day;
  }
  return [year, month, day].join('-');
}
console.log(formatDate('Febuary 1, 2021'));

We create the formatDate function which takes a date format and return the date string in YYYY-MM-DD format.

We create a Date instance from the date by passing it in.

Then we get the month, day, and year from the d object.

Next, we pad the month and day strings with leading zeroes if their lengths are less than 2 in length.

And finally, we return the year, month, and day joined together with the join method.

Therefore, the console log should log:

'2021-02-01'

We can shorten the function with the padStart method to add the leading zeroes.

To do this, we write:

const formatDate = (date) => {
  let d = new Date(date);
  let month = (d.getMonth() + 1).toString().padStart(2, '0');
  let day = d.getDate().toString().padStart(2, '0');
  let year = d.getFullYear();
  return [year, month, day].join('-');
}
console.log(formatDate('Febuary 1, 2021'));

We call padStart to pad month and day to the length of 2.

And we pad the string with leading zeroes.

And so we should get the same result as the previous example.

Date.protptype.toISOString

Another way to format a JavaScript date to YYYY-MM-DD format is to use the toISOString method.

For instance, we can write:

const formatDate = (date) => {
  const [dateStr] = new Date(date).toISOString().split('T')
  return dateStr
}
console.log(formatDate('Febuary 1, 2021'));

to create the formatDate function and call it.

We create a Date instance from the date parameter.

Then we call toISOString to it to create a date string.

The part before the T is in YYYY-MM-DD format, so we can extract that with split and return it.

Therefore, we should get the same result as the previous examples.

String.prototype.slice

We can use toISOString with the string slice method to extract the substring with the YYYY-MM-DD date string.

For instance, we can write:

const formatDate = (date) => {
  return new Date(date).toISOString().slice(0, 10)
}
console.log(formatDate('Febuary 1, 2021'));

to extract that part of the string.

And we get the same result as before in the console log.

Date.prototype.toLocaleDateString

We can use the toLocaleDateString method to format a date with the Canadian English locale to format a date to YYYY-MM-DD.

For example, we can write:

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('en-CA')
}
console.log(formatDate('Febuary 1, 2021'));

to do this.

We call toLocaleDateString with ‘en-CA’ to format the string with the given locale string.

And we get the same result as before.

Conclusion

To format a JavaScript date into YYYY-MM-DD format, we can extract the date parts and put them together ourselves.

Or we can use existing date methods to format the dates into the string.