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

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 consistently formatted and has 2 digits for the month and days, so we used the padStart method.

The next function we created is the one that formats a date as 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.

The getMonth method is zero-based, so we added 1 to its return value.

The last step is to wrap 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 (dd/mm/yyyy)
console.log(formatDate(new Date()));

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

This approach can be used to format a date in any other way. All you have to do is reorder the elements in the array and change the separator (e.g. to a hyphen -).

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