[How To] Javascript format date to dd mm yyyy in 2023

Introduction

Every JavaScript developer will usually go through a date conversion exercise. This can be confusing since theres so many ways to work with dates.

JavaScript dates follow the ISO 8601 standard and RFC 2822 to keep dates and time unambiguous and internationally agreed/ understood upon!

This blog I will go over a few ways to convert dates to the format of DD/MM/YYYY in JavaScript.

Why do we need the ISO 8601 standard?

When dealing with dates, the interpretation of the date can be different depending on where you live.

For example, take the date: 01/05/23. Now if you live in Australia/UK this means it is the 1st May 2023. Now for someon in America (USA) this means January 5, 2023.

This could lead to problems with your app (for example using Australia/UK format dates)- someone visiting your app from in USA thinks a conference date is 4 months ahead :)

The standard sets that date formats should be: YYYY-MM-DD

For example, September 27, 2012 is represented as 2012-09-27.

Convert date to DD/MM/YYYY in vanila Javascript

There are a few ways to convert a date to a formatted string of DD/MM/YYYY. Below are four options using vanila JavaScript.

Option 1 - use toLocaleString()

The quickest way to get a date to string format of DD/MM/YYYY is using the toLocaleString() function of the Date object.

The syntax that is accepted is:

toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)

An example of how we can use it is as follows:

const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// British English uses day-month-year order and 24-hour time without AM/PM
console.log(event.toLocaleString('en-GB', { timeZone: 'UTC' }));
// Expected output: "20/12/2012, 03:00:00"

// Korean uses year-month-day order and 12-hour time with AM/PM
console.log(event.toLocaleString('ko-KR', { timeZone: 'UTC' }));
// Expected output: "2012. 12. 20. 오전 3:00:00"

Now as we can see from the above, the toLocaleString() method also returns the time aswell. To get rid of the time, we just need to use the split method:

const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

let formattedDate = event.toLocaleString().split(',')[0];

// Expected output: "20/12/2012"

Option 2 - use getDate, getMonth and getFullYear

The classic way to get a formatted string from a Date is using the getDate, getMonth and getFullYear date methods. This method is a bit longer than the other one liners, but would be most flexible.

This is because you are building up the date format from scratch and appending it to the final string

// gives you your current date
const today = new Date();
const yyyy = today.getFullYear();
let mm = today.getMonth() + 1; // Months start at 0!
let dd = today.getDate();

if (dd < 10) dd = '0' + dd;
if (mm < 10) mm = '0' + mm;

const formattedToday = dd + '/' + mm + '/' + yyyy;

In the above, we just break down the dates with the default date methods

• getFullYear() - this just gets the year - eg 2023
• getMonth() - this gets the month of the year. Keep in mind that it starts with 0 - so January is 0 and December is 11. That is why we need to add 1 to this value.
• getDate() - this gets the day of the month (1 to 31)

Next we have checks to see if the day or month is less than 10. When its less than 10, we just prefix it with ‘0’ - eg for May, instead of just displaying “4”, we show it as “04”!

Finally we combine all those values to make the format DD/MM/YYYY

Option - use toJSON()

We can also use the toJSON() JavaScript method to get our date format of DD/MM/YYYY

new Date().toJSON().slice(0,10).split('-').reverse().join('/')

Lets break the above one liner to understandable chunks.

1. When we run .toJSON() to a date object it gives us the following string:

'2023-01-21T23:54:28.878Z'

2. The next step to to take the date section and leave out the time. We do this with the slice(0,10)
3. Next we take our date string and reverse it. As you can see from step 1, the date has the year first, and we want to have the day first and year last. So we just make it into a array with .split('-'). Then reverse the array with reverse()

.split('-').reverse()

4. Finally join that array with the forward slash ('/') using the .join('/') method!

Convert date to DD/MM/YYYY in moment

Moment is a extremely popular library to convert our dates to the format of DD/MM/YYYY.

As an example, we just need to call the format() method to convert our dates:

var date = new Date();
moment(date).format('DD/MM/YYYY')

You can install Moment in the browser or in Node. In the browser we just need to include it in the script tag:

<script src="moment.js"></script>
<script>
    moment().format();
</script>

With Node environments, we can follow the steps below:

1. Open up the terminal:

npm install moment

2. Use require syntax to call moment:

var moment = require('moment'); // require
moment().format(); 

Or if you want to use ES6 syntax (with the export/import keywords):

import moment from 'moment';
moment().format();

Warning: Moment is in maintenance mode!

Although Moment is great library that just works for date conversions, it has a few negatives when using it with modern applications:

• Does not support tree-shaking - won’t remove code that is not used and therefore results in huge bundle size and causes performance issues.
• Heavy: its minified weight is 67,9Kb.
• Moment objects are mutable. This means that it can be changed without creating an entirely new value. This can lead to random bugs.

The authors have stated that they will only be maintaining Moment - so don’t expect any new features! For new projects probably go with newer libraries like Day.js (https://day.js.org/) or Luxon (https://moment.github.io/luxon/#/)

Note: Even the Chrome Dev team suggest moving away from moment!

To use Day.js, we just do the following:

npm install dayjs

Then include it in your script:

const dayjs = require('dayjs')
//import dayjs from 'dayjs' // ES 2015
dayjs('2019-01-25').format('DD/MM/YYYY') // '25/01/2019'

To see all the format tokens that moment support, have a look here (Day.JS and Luxon should have the same formats too):

• https://momentjs.com/docs/#/parsing/string-format/

Convert date to DD/MM/YYYY in jQuery

If you are using jQuery date conversion should look similar to using the vanila Javascript options.

We can use any of the following methods to convert our date into the desired format of DD/MM/YYYY

• new Date().toJSON().slice(0,10).split('-').reverse().join('/')
• new Date().toLocaleString().split(',')[0]

Using jQuery plugin - jQuery Format Date

If you dont prefer these vanila javascript methods, there are plugins we can use.

One date format plugin in that is available for jQuery is the format date plugin (https://github.com/phstc/jquery-dateFormat)

An example of its use are as follows. We include it in the HTML:

...
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/phstc/jquery-dateFormat/master/dist/jquery-dateformat.min.js"></script>
</head>
...

Then in our Javascript, we can use the $.format.date method like so:

 <script>
   document.write($.format.date("2009-12-18 10:54:50.546", "dd/MM/yyyy"));
   document.write($.format.date("Wed Jan 13 10:43:41 CET 2010", "dd~MM~yyyy"));
 </script>

This will output the following:

 => 18/12/2009
 => 13~01~2010

Using the jQuery UI datepicker

If you are using the DatePicker UI Jquer plugin, it has a format date function that can be used to convert your date to dd/MM/yyyy:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

Then in the JavaScript, we can call the $.datepicker.formatDate method:

let myDate = '2020-11-10';
$.datepicker.formatDate('dd/MM/yyyy', new Date(myDate));

Summary

Working with dates in JavaScript or any language can be confusing and challenging. With Javascript we can convert dates to the format of dd/MM/yyyy using various techiques such as using only vanila JavaScript, using the moment library, and using jquery plugins or the datepicker in jquery UI.

With vanila Javascript we have a few options to convert dates to the format of dd/MM/yyyy - this includes using the toLocaleString method, use the toISOString, and the default Date functions of getDate, getMonth, getFullYear.

The simpliest way to convert dates is using the popular javascript library: Moment. However keep in mind that Moment is a legacy project in maintenance mode. It is not dead, but the authors are not making any more updates!

If you are on new projects consider using more modern libraries like Day.JS or Luxon!