Format a Date as DD/MM/YYYY in JavaScript

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

To format a date as dd/mm/yyyy:

1. Use the getDate(), getMonth() and getFullYear() methods to get the day, month 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.

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

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

// 👇️ 24/10/2021 (mm/dd/yyyy)
console.log(formatDate(new Date()));

//  👇️️ 24/07/2027 (mm/dd/yyyy)
console.log(formatDate(new Date(2027, 6, 24)));

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).

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

console.log(padTo2Digits(2)); // 👉️ '02'
console.log(padTo2Digits(6)); // 👉️ '06'
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 next function we created is the one that formats a date to dd/mm/yyyy.

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

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

• 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.getFullYear method - returns a four-digit number representing the year that corresponds to a date.

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.

Copied!
console.log(['28', '06', '2027'].join('/')); // 👉️ '28/06/2027'
console.log(['16', '09', '2026'].join('/')); // 👉️ '16/09/2026'

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

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

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

// 👇️ 24/10/2021 (mm/dd/yyyy)
console.log(formatDate(new Date()));

//  👇️️ 24/07/2027 (mm/dd/yyyy)
console.log(formatDate(new Date(2027, 6, 24)));

Further Reading #

• Format a Date as YYYY-MM-DD hh:mm:ss in JavaScript
• How to Format a Date as MM/DD/YYYY in JavaScript