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

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

In JavaScript, the date format is ISO standard, so this article helps you format a date as DD/MM/YYYY in JavaScript. Learn more about it with the explanation and examples below.

Format a date as DD/MM/YYYY in JavaScript

Method 1: Use getDate(), getMonth(), getFullYear() function

First, we need to learn the following methods:

Syntax: 

  • getDate(): It returns the day of the month, from 1 to 31.
  • getMonth(): It returns the month, from 0 to 11.
  • getFullYear(): It returns the year between 1000 and 9999.

Parameters: All these methods don’t need any parameters.

After, we’ll create a currentDate variable:

let currentDate = new Date();

For instance, this code will output is:

Wed Sep 28 2022 21:27:44 GMT+0700 (Indochina time)

We will look up the day using the getDate() function as:

let day = currentDate.getDate();

Next, check to see how many digits the day variable has. If there is one digit, we convert it to 2 digits:

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

Same as above, we get the month using the getMonth() function:

let month = currentDate.getMonth() + 1;

We added 1 to our month because the month got from getMonth() starts at 0. Then we need to make sure that the month is not a single digit, so we create the following check on it:

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

Finally, to get the year value, we execute the getYear() function:

let year = currentDate.getYear();

To display the correct date format result. We use the console.log():

console.log(day + '/' + month + '/' + year);

Here’s the complete code snippet:

let currentDate = new Date();

let day = currentDate.getDate();
if (day < 10) {
	day = '0' + day;
}

let month = currentDate.getMonth() + 1;
if (month < 10) {
  	month = '0' + month;
}

let year = currentDate.getFullYear();  

console.log(day + '/' + month + '/' + year);

Output:

27/09/2022

Method 2: Use padStart() function

This method is shorter and as easy to understand as the one above.

padStart() in JavaScript is a method of the String object, which adds characters to the beginning of a string in JavaScript until it reaches the specified length and creates a new string.

Syntax:

padStart(length, [sub])

Parameters:

  • length: The length of string to reach after adding characters
  • sub: character used to append to the beginning of the string until the length is reached. By default, the sub is a space, and this character can be omitted.

For example:

let date = new Date();
let day = String(date.getDate()).padStart(2, '0');
console.log(day);

Output:

27

The complete code snippet is as follows:

let date = new Date();
let day = String(date.getDate()).padStart(2, '0');
let month = String((date.getMonth())+1).padStart(2, '0');
let year = date.getFullYear();

console.log(day + '/' + month + '/' + year);

Output:

27/09/2022

Summary

Hope this article has helped you understand how to format a date as DD/MM/YYYY in JavaScript more easily. With the above 2 methods, I really like the 2nd method more because it is quite concise and convenient. If you want to know more about date functions and other formats, you can follow the suggestions in here. Thank you for reading.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *