Format a Date as MM/DD/YYYY in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

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 of the date.
  2. Add a leading zero to the day and month digits if the value is less than 10.
  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 that 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 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 padStart method is the total length of the string. The method won't pad the day or month values 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.

The getMonth method is zero-based, so 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 #

Use the search field on my Home Page to filter through my more than 3,000 articles.