Format a Date as DD/MM/YYYY in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

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

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'

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 first argument we passed to the padTo2Digits function is the total length of the string, so it will never pad the day or month if they already have 2 digits.

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 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 step is to wrap the results in an array, so we can join them with a forward slash / separator.

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

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

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 #

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.