Borislav Hadzhiev
Reading timeยท3 min
Photo from Unsplash
To format a date as DD/MM/YYYY:
getDate()
, getMonth()
and getFullYear()
methods to get the day,
month and year of the date.10
.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
).
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:
0
in our case)The next function we created is the one that formats a date as DD/MM/YYYY
.
// โ 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.
getMonth
method returns a zero-based value where January is 0
and December is 11
.// ๐๏ธ 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()
.
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.
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.
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
-
).