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/02/2023 (DD/MM/YYYY)
console.log(formatDate(new Date()));

//  👇️️ 24/07/2027 (DD/MM/YYYY)
console.log(formatDate(new Date(2027, 6, 24)));

The padTo2Digits function takes care of adding a leading zero if the month and day values 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'
console.log(padTo2Digits(24)); // 👉️ '24'

We want to make sure that the values for the month and day are always consistently formatted, so we used the padStart method.

The arguments we passed to the padStart() method are:

1. the total length of the string
2. the pad character (0 in our case)

The next function we created is the one that formats a date as DD/MM/YYYY.

Copied!
// ✅ format date as DD/MM/YYYY
function formatDate(date) {
  return [
    padTo2Digits(date.getDate()),
    padTo2Digits(date.getMonth() + 1),
    date.getFullYear(),
  ].join('/');
}

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

The function uses the following 3 methods on the Date object:

• 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 of the given date. Yes, unfortunately, the getMonth method is off by 1.

• Date.getFullYear - returns a four-digit number that represents the year of the given date.

Copied!
// 👇️ May 19th 2025
console.log(new Date(2025, 4, 19));

// 👇️ June 19th 2025
console.log(new Date(2025, 5, 19));

// 👇️ July 19th 2025
console.log(new Date(2025, 6, 19));

The getMonth() method returns a zero-based value, so we have to add 1 to get the expected result.

The last step is to group the day, month and year into an array and format them as DD/MM/YYYY using Array.join().

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

The Array.join() method concatenates all of the elements in an array using a separator.

You can extract the logic into a reusable function to not have to remember that the getMonth method returns a zero-based value.

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

The function takes a Date object as a parameter, formats the date as dd/mm/yyyy and returns the result.

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