Format a Date as MM/DD/YYYY in JavaScript

Sometimes you may need to format a date as a specific string, such as MM/DD/YYYY, in JavaScript. Here’s how you can do it:

Using getMonth(), getDate(), and getFullYear()

To get the month, day, and year of a date, you can use the getMonth(), getDate(), and getFullYear() methods, respectively. These methods return an integer representing the respective value for the given date. For example:

const date = new Date();const month = date.getMonth(); // returns an integer between 0 (January) and 11 (December)const day = date.getDate(); // returns an integer between 1 and 31 representing the day of the monthconst year = date.getFullYear(); // returns a four-digit number representing the year

Note that the getMonth() method is zero-based, so January is represented as 0 and December is represented as 11.

Adding Leading Zeros to Single-Digit Values

To ensure that the month and day values always contain two digits (e.g. 01, 02, 03), you can use a helper function that adds a leading zero to single-digit values. Here’s an example:

function padTo2Digits(num) {  return num.toString().padStart(2, '0');}

This function uses the padStart() method, which pads the start of a string with a specified character or string until the desired length is reached.

Must Read: How to Convert a dd/mm/yyyy string to a Date in JavaScript

Here’s an example of how you can use this function:

console.log(padTo2Digits(1)); // returns '01'console.log(padTo2Digits(4)); // returns '04'console.log(padTo2Digits(10)); // returns '10'

Putting It All Together

Now that we have all the pieces, we can create a function that formats a date as MM/DD/YYYY. Here’s an example:

function formatDate(date) {  return [    padTo2Digits(date.getMonth() + 1),    padTo2Digits(date.getDate()),    date.getFullYear(),  ].join('/');}

This function uses the join() method to concatenate the elements of an array using a forward slash as a separator.

Here’s an example of how you can use the formatDate() function:

console.log(formatDate(new Date())); // returns the current date in MM/DD/YYYY formatconsole.log(formatDate(new Date(2027, 3, 6))); // returns '04/06/2027'

Conclusion on Format a Date as MM/DD/YYYY in JavaScript

By using the getMonth(), getDate(), and getFullYear() methods and a helper function to add leading zeros to single-digit values, you can easily format a date as MM/DD/YYYY in JavaScript. I hope this helps!