How to Format a Date DD/MM/YYYY in JavaScript

There are 3 ways to easily format a date in DD/MM/YYYY in JavaScript. One of the methods is a 1-liner! Let’s explore the methods.

Methods to Format a Date DD/MM/YYYY in JavaScript

Here are the list of 3 methods where we can format a date in DD/MM/YYYY in JavaScript.

• Format Date with Pre-ES6 style
• Format Date with ES6 style
• toLocaleDateString() Method

Let’s look into each details with illustration below.

1. Format Date with Pre-ES6 style

While most of us will be using ES6 to code, there will be some code base that will still be doing development with pre-es6 codes.

Process Flow:

1. Get the year, month and day with getFullYear(), getMonth() and getDate() method respectively.
2. If month or day is less than 10, we will prefix a 0.
3. Return the date string in DD/MM/YYYY format.

Below shows the example where we develop the logic stated in the process flow.

function formatDate(date = new Date()) {
  var day, month, year;

  year = date.getFullYear();
  month = date.getMonth() + 1;
  day = date.getDate();
  
  if (month < 10) {
    month = '0' + month;
  }

  if (day < 10) {
    day = '0' + day;
  }
  
  return day + '/' + month + '/' + year;
}

// Use current date without passing in
var ddmmyyyy = formatDate();
console.log(ddmmyyyy);        // "03/05/2022"

// Pass in other date
const xday = new Date('2022-03-30');
ddmmyyyy = formatDate(xday);
console.log(ddmmyyyy);        // "30/03/2022"

2. Format Date with ES6 style

For es6 style, we will be modifying the Pre-ES6 style. We will use padStart() is part of original String standard built-in object method in JavaScript.

Its features includes:

• Pad additional string to the original value
• Padding can be done multiple times in 1 execution until it reach the minimum length
• Padding will be done from the start of the string
• Accept 2 parameters. targetLength to indicate the minimum length of the string and padString to indicate the padding string.

Process Flow:

1. Get the year, month and day with getFullYear(), getMonth() and getDate() method respectively.
2. Using padStart(2, 0) to pad 0 in front as long as the original string length is less than 2.
3. Return the date string in DD/MM/YYYY format.

Below shows the example where we develop the logic stated in the process flow.

const formatDate = (date = new Date()) => {
  let year, month, day;

  year = date.getFullYear();
  month = date.getMonth() + 1;
  day = date.getDate();
  
  month = month.toString().padStart(2, 0);
  day = day.toString().padStart(2, 0);
  
  return `${day}/${month}/${year}`;
}

// Use current date without passing in
var ddmmyyyy = formatDate();
console.log(ddmmyyyy);        // "03/05/2022"

// Pass in other date
const xday = new Date('2022-03-30');
ddmmyyyy = formatDate(xday);
console.log(ddmmyyyy);        // "30/03/2022"

3. toLocaleDateString() Method

toLocaleDateString() is part of original Date standard built-in object method in JavaScript.

Its features includes:

• If add in en-GB parameter, it will display in British English format

Below shows the example where we will first create the date object. Subsequently, we use toLocaleDateString('en-GB') to display in the date format and toLocaleString('en-GB') if we also want the time.

const myDate = new Date('2022', '2', '30');

console.log(myDate.toLocaleDateString('en-GB'));      // 30/03/2022
console.log(myDate.toLocaleString('en-GB'));          // "30/03/2022, 00:00:00"

Conclusion

We have look into 3 different methods to format a date in DD/MM/YYYY in JavaScript.

toLocaleDateString() is the easiest since it is one liner. But it does not provide the flexibility to change the format easily. Hence, we can choose