Format a Date as DD/MM/YYYY in JavaScript

avatar

Borislav Hadzhiev

3 min

banner

Photo from Unsplash

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

index.js
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 method will never pad the day and month values if they already have 2 digits.

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

index.js
// โœ… 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.

The getMonth method returns a zero-based value where January is 0 and December is 11.
index.
// ๐Ÿ‘‡๏ธ 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().

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

The only argument the Array.join() method takes is a separator - the string used to separate the elements of the array.

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

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev