isotropic-2022
Share
Blog
Search
Menu

How To Format a Date as DD/MM/YYYY in JavaScript

By Greg Murray
|
Last updated on April 2nd, 2022
|

Getting date formats right in JavaScript can be a challenge — especially when there are many different input and output formats. There are some JavaScript packages that can help with this task but it might be hard to justify the package size for a simple date string. Sometimes it is better to keep things simple so in this blog you will learn how to format a date as DD/MM/YYYY using pure JavaScript.

The Problem

JavaScript dates use the ISO standard by default. This means that if you simply want a string for a date using native JavaScript methods, you will be faced with a couple different options that are meant to keep things as standardized as possible.

const today = new Date('2022', '2', '28'); console.log(today.toString()); // Mon Mar 28 2022 00:00:00 GMT-0400 (Eastern Daylight Time) console.log(today.toDateString()); // Mon Mar 28 2022 console.log(today.toISOString()); // 2022-03-28T04:00:00.000Z console.log(today.toLocaleDateString()) // 3/28/2022 (depending on locale)

These are all great at what they do but what if you specifically need the DD/MM/YYYY format? Using toLocaleDateString() is close but its format varies based on the browser’s time zone and language.

You could use the ISO version of the date string provided by toISOString() to perform a few string operations to move around the dates. This is a potentially usable solution but perhaps not the most clear or concise. There must be something better.

The Solution

The most straightforward way to create a date string in DD/MM/YYYY format involves using a few native get() methods and some simple logic. The first step is to get the date’s month, date, and year. Be careful here — JavaScript months are 0 based so you’ll need to increment the month by one.

let date, month, year; date = inputDate.getDate(); month = inputDate.getMonth() + 1; // take care of the month's number here ⚠️ year = inputDate.getFullYear();

Once you have these values you can add 0’s to the month and date where necessary:

if (date < 10) { date = '0' + date; } if (month < 10) { month = '0' + month; }

If you prefer a newer ES2017 approach, you can refactor the logic above by utilizing the padStart() method. This is a native string method first introduced with ES2017 that accepts the desired length as the first parameter and the string to fill with as the second parameter. In this case, you want the value of the month or date to always be exactly two digits long so that will be the first parameter. The value should either start with 0 or naturally be two digits long so 0 will be the second parameter as follows:

date = date .toString() .padStart(2, '0'); month = month .toString() .padStart(2, '0');

Put these values together and you’ll have your date formatted as a DD/MM/YYYY string:

console.log(`${date}/${month}/${year}`); // 28/03/2022

That’s it! One great thing about this solution is that since you have all three parts of the date broken up, you can easily use this logic to create any desired date string format. Using dates can be tricky in general and JavaScript’s native solutions are not exactly intuitive for every use case. Fortunately, it is simple enough to get the date format you want with only a few lines of code.

Here is the full solution:

function format(inputDate) { let date, month, year; date = inputDate.getDate(); month = inputDate.getMonth() + 1; year = inputDate.getFullYear(); date = date .toString() .padStart(2, '0'); month = month .toString() .padStart(2, '0'); return `${date}/${month}/${year}`; } const result = format(new Date('2022', '2', '28')); console.log(result); // 28/03/2022

Bonus

For those of you who enjoy finding fun one-liners to use in their code, there is actually a more elegant solution to formatting a date as DD/MM/YYYY. Remember the toLocaleDateString() method mentioned earlier? It accepts a locale string as a parameter. If you use the British English locale of 'en-GB' you’ll get the format you wanted in just one line of code.

const result = new Date('2022', '2', '28').toLocaleDateString('en-GB'); console.log(result); // 28/03/2022
The Isotropic Codex is a collection of code snippets and education for WordPress, web and WooCommerce developers.
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
Greg Murray
Contributors/Editors
notloggedin
I’m a passionate and driven web developer with an eye for design and appreciation for the human aspect of technology. I am experienced with building websites for small to medium businesses or large web applications for big businesses. Websites can be custom made using cutting edge technology and responsive design or created using the website builder of your choice.
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
cross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
0

Your Cart is Empty