JavaScript

Format a Date as YYYY-MM-DD in JavaScript

There are generally three types of JavaScript date input formats, including ISO format (YYYY-MM-DD, e.g., 2000-01-23), short format (DD/MM/YYYY, e.g., 23/01/2000), and long date (MM DD YYYY, e.g., Jan 23, 2000, or 23 Jan 2000) format. However, the most commonly used date format is ISO (The International Standard) date format which follows the YYYY-MM-DD format.

This tutorial will demonstrate the methods to set the date in a YYYY-MM-DD format.

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

To format the date as YYYY-MM-DD, use the following JavaScript predefined methods:

Method 1: Format a Date as YYYY-MM-DD Using the Concatenation of the getFullYear(), getMonth(), and getDate() Methods

For converting the date to ISO format YYYY-MM-DD, use the “getFullYear()”, “getMonth()” and “getDate()” methods of the Date object. These methods get the month, year, and date of the respective given date.

In the upcoming examples, we will show you how it works and what we could do for a 2-digit month and date.

Syntax

The following syntax is used for the getFullYear(), getMonth(), and getDate() methods:

date.getFullYear()
date.getMonth() + 1
date.getDay()

In the above syntax:

  • The “getFullYear()” method gives the year in 4 digits of the specified date.
  • The “getMonth()” method outputs the month from 0 to 11 of date.
  • getDay()” method returns a day of the week.

Example 1: Format a Date Using the Concatenation of the getFullYear(), getMonth(), and getDate() Methods

Create a new Date object by passing a specific date in the short date format as a parameter that will be formatted:

var date = new Date("8 Sep 2000");

Get the year, month, and date from the given date using the JavaScript getFullYear(), getMonth(), and getDate() methods:

var dateFormat = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()

Finally, print the resultant date on the console:

console.log(dateFormat);

The output shows it is not in proper format as the month and the date is not in the 2-digit format:

Let’s see how to get the month and date in a 2-digit format.

Example 2: Format a Date Using the Concatenation of the getFullYear(), getMonth(), and getDate() Methods in YYYY-MM-DD Format

Here, we will utilize all the JavaScript getFullYear(), getMonth(), and getDate() methods and set the append 0 as a prefix if the month and date are less than 10:

var dateFormat = date.getFullYear() + "-" +((date.getMonth()+1).length != 2 ? "0" + (date.getMonth() + 1) : (date.getMonth()+1)) + "-" + (date.getDate().length != 2 ?"0" + date.getDate() : date.getDate());

Lastly, print the resultant date on the console using the “console.log()” method:

console.log(dateFormat);

Output

Let’s try another method to format the date in YYYY-MM-DD format.

Method 2: Format a Date as YYYY-MM-DD Using the toLocaleDateString() Method

Use the “toLocaleDateString()” method to convert the date to the YYYY-MM-DD format. It gives a language-sensitive date representation string as an output. In this method, set the “option” parameter to “2-digit“, which will return month and day in 2 digits if the value is less than 10.

Syntax

Follow the given syntax for using the toLocaleDateString() method:

toLocaleDateString(locales, options)

In the above syntax:

  • locales” is a string.
  • options” is an object that adjusts the output format.

Example

Call the “toLocaleDateString()” method and retrieve the year from the given date and store it in a variable “getYear”:

var getYear = date.toLocaleString("default", { year: "numeric" });

Similarly, get the month and date from the date using the “toLocaleDateString()” method and store them in variables, respectively:

var getMonth = date.toLocaleString("default", { month: "2-digit" });
var getDay = date.toLocaleString("default", { day: "2-digit" });

Now, set the date in a specific format by accessing variables that store the year, month, and day in a specified format:

var dateFormat = getYear + "-" + getMonth + "-" + getDay;

Print the resultant date on the console:

console.log(dateFormat);

The output shows that the date is successfully converted into YYYY-MM-DD format

We have provided all the best possible solutions to format a Date as in YYYY-MM-DD in JavaScript.

Conclusion

To set the format of a date as YYYY-MM-DD in JavaScript, use the “toLocaleDateString()” method or the concatenation of the “getFullYear()”, “getMonth()” and “getDate()” methods. In the toLocaleDateString() method, set the “option” parameter to the “2-digit” number for month and date while, in the second approach, append leading zero to the resultant value if it is less than 10. This tutorial demonstrated the methods to set the date in a YYYY-MM-DD format.

About the author

Farah Batool

I completed my master's degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.