2
28

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

Reading Time: 2 minutes

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

Show Comments

No Responses Yet

Leave a Reply