How to Format a Date to YYYY-MM-DD in JavaScript?

To format a date to YYYY-MM-DD in JavaScript, call the getFullYear(), getMonth() and getDate() methods on the date object to get the year, month and day of the month respectively and then join them back in the form of a string to get the desired date format.

For example,

// Today's date
const date = new Date();

// Get year from date
const year = date.getFullYear();

// Get month from date
const month = (date.getMonth() + 1).toString().padStart(2, '0');

// Get day of the month
const day = date.getDate().toString().padStart(2, '0');

// Format date in yyyy-mm-dd
const formattedDate = `${year}-${month}-${day}`;

console.log(formattedDate);
// Output: 👉 "2023-03-18"

In this example, we have used three built-in date methods, getFullYear(), getMonth() and getDate().

The getFullYear() method returns an integer value representing the year for the specified date.

If you call the getFullYear() method on the current date object, it gives you the current year.

For example,

// Today's date
const today = new Date();

// Get year from the date
const year = today.getFullYear();

console.log(year);
// Output: 👉 2023

The getMonth() method returns an integer between 0 and 11 representing the month of the year. Here, 0 represents January, 1 represents February and so on.

If you call the getMonth() method on the current date object, it returns the month index(0 based) of the current month of the year.

// Today's date
const today = new Date();

// Get month from the date
const month = today.getMonth();

console.log(month);
// Output: 👉 2

As the result of the getMonth() method is 0 based, therefore, we added +1 to get the exact month number.

The third date method that we used is the getDate().

The getDate() method returns an integer value between 1 and 31 representing the day of the month.

If you call the getDate() method on the current date object, it returns the current day of the month.

For example,

// Today's date
const today = new Date();

// Get day of the month 
const day = today.getDate();

console.log(day);
// Output: 👉 18

As the result of the getMonth() and getDate() methods can also be single digit, therefore, we used the String.padStart() method to pad the result with 0, for example, 01, 02, 03, etc.

The padStart() method pads the beginning of a string with another string until it reaches a given length.

Here is its syntax:

string.padStart(targetLength [, padString])

Here targetLength is the length of the resulting padded string, and padString is an optional parameter that specifies the string to be padded at the beginning of string.

In our case, we padded the month and day with zeros if their length was less than 2.

For example,

const month = 1;

console.log(month.toString().padStart(2, '0'));
// Output: 👉 "01"

const str = 'abc';

console.log(str.padStart(5, '*'));
// Output: 👉 "**abc"

Format any Specific Date to YYYY-MM-DD with JavaScript

In the last example, we formatted the current(today’s) date to the yyyy-mm-dd format.

If you want to format any specific date to the yyyy-mm-dd format, you have to first pass it as a paramter to the Date() constructor to get the corresponding date object and then follow the same steps.

For example,

// Get date object from given date
const date = new Date('Sun, 19 March 2023');

// Get year from date
const year = date.getFullYear();

// Get month from date
const month = (date.getMonth() + 1).toString().padStart(2, '0');

// Get day of the month
const day = date.getDate().toString().padStart(2, '0');

// Format date in yyyy-mm-dd
const formattedDate = `${year}-${month}-${day}`;

console.log(formattedDate);
// Output: 👉 "2023-03-19"

By following these steps, you can actually format the given date to any format you want.

You just need to rearrange the values of the year, month and day and get the desired format.

That’s all for this article. Thanks for reading!