How to Format a Date as MM/DD/YYYY in JavaScript

avatar

Borislav Hadzhiev

Sun Oct 24 20212 min read

banner

Photo by Jeremy Bishop

Format a Date as MM/DD/YYYY in JavaScript #

To format a date as mm/dd/yyyy:

  1. Use the getMonth(), getDate() and getFullYear() methods to get the month, day and year for the specific date.
  2. Add a leading zero to the day and month digits if the value is less than 10 to always get consistent results.
  3. Add the results to an array and join them with a forward slash separator.
index.js
function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function formatDate(date) { return [ padTo2Digits(date.getMonth() + 1), padTo2Digits(date.getDate()), date.getFullYear(), ].join('/'); } // ๐Ÿ‘‡๏ธ 10/24/2022 (mm/dd/yyyy) console.log(formatDate(new Date())); // ๐Ÿ‘‡๏ธ๏ธ 04/06/2027 (mm/dd/yyyy) console.log(formatDate(new Date(2027, 3, 6)));

We created a padTo2Digits function, which takes care of adding a leading zero if the month or day only contain a single digit (are less than 10).

index.js
function padTo2Digits(num) { return num.toString().padStart(2, '0'); } console.log(padTo2Digits(1)); // ๐Ÿ‘‰๏ธ '01' console.log(padTo2Digits(4)); // ๐Ÿ‘‰๏ธ '04' console.log(padTo2Digits(10)); // ๐Ÿ‘‰๏ธ '10'

We want to make sure that the result is always consistent and has 2 digits for the months and days, so we used the padStart method.

The first parameter we passed to the padTo2Digits function is the total length of the string, so it will never pad a day or month if they already have 2 digits.

The next function we created is the one that formats a date to mm/dd/yyyy.

The function makes use of the following 3 Date related methods.

  • Date.getMonth - returns an integer between 0 (January) and 11 (December) and represents the month for a given date. Yes, unfortunately the getMonth method is off by 1.

  • Date.getDate - returns an integer between 1 and 31 representing the day of the month for a specific date.

  • Date.getFullYear method - returns a four-digit number representing the year that corresponds to a date.

The getMonth method returns a zero-based month index from 0 to 11, meaning January is 0 and December is 11.

Because the getMonth method is zero-based we added 1 to its return value.

The last thing we did in the function is place the results in an array, so we can join them with a forward slash / separator.

index.js
console.log(['05', '22', '2027'].join('/')); // ๐Ÿ‘‰๏ธ '05/22/2027' console.log(['11', '09', '2026'].join('/')); // ๐Ÿ‘‰๏ธ '11/09/2026'

This formats the date as mm/dd/yyyy. Here's the complete code snippet.

index.js
function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function formatDate(date) { return [ padTo2Digits(date.getMonth() + 1), padTo2Digits(date.getDate()), date.getFullYear(), ].join('/'); } // ๐Ÿ‘‡๏ธ 10/24/2021 (mm/dd/yyyy) console.log(formatDate(new Date())); // ๐Ÿ‘‡๏ธ๏ธ 04/06/2027 (mm/dd/yyyy) console.log(formatDate(new Date(2027, 3, 6)));

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee