Blog

In order to understand formatting the date to string dd/mm/yyyy in JavaScript, we must first understand what date formats are used in JavaScript. JavaScript uses the ISO 8601 date format, which is dd/mm/yyyy. This means that the date is formatted as day, month, and year. For example, 1/1/2015 would be January 1st, 2015.

In order to convert a date to a string in dd/mm/yyyy format, we can use the Date object in JavaScript or by using the slice function. Before we use the Date object, let’s see what it is and what it actually does.

Date Object In JavaScript

The Date object is a built-in object in JavaScript that stores the date and time. It provides several methods for manipulating dates and times.

Creating A Date Object

We can create a Date object by using the new keyword like this:

var d = new Date();

This will create a Date object with the current date and time.

We can also create a Date object with a specific date and time like this:

var d = new Date(2022, 03, 26);

This will create a Date object with the date set to April 26th, 2022.

Let’s see some of the functions we are going to use on the Date object for formatting the date to dd/mm/yyyy –

getDate()

The getDate() function will return the day of the month (1-31) for the specified date.

For example:

var d = new Date(2022, 03, 26);

console.log(d.getDate()); //26

getMonth()

The getMonth() function will return the month (0-11) for the specified date. January is 0, February is 1, and so on.

For example:

var d = new Date(2022, 03, 26);

console.log(d.getMonth()); //3 (April)

getFullYear()

The getFullYear() function will return the year of the specified date.

For example:

var d = new Date(2022, 03, 26);

console.log(d.getFullYear()); //2022

Now that we know how to get the day, month, and year from a date object, let’s see how to put it all together to format the date as dd/mm/yyyy.

Formatting The Date To String dd/mm/yyyy In JavaScript

We are going to use the getDate(), getMonth(), and getFullYear() functions to format the date like dd/mm/yyyy. We will store the day in a variable called day, the month in a variable called month, and the year in a variable called year. We will then use the + operator to concatenate the day, month, and year into a string like dd/mm/yyyy.

Let’s see how this works in code:

var d = new Date();

var day = d.getDate();

var month = d.getMonth() + 1; //January is 0!

var year = d.getFullYear();

if (day < 10) {

day = "0" + day;

}

if (month < 10) {

month = "0" + month;

}

var date = day + "/" + month + "/" + year;

console.log(date); //26/04/2022

As you can see, we have formatted the date as dd/mm/yyyy successfully!

Method 2 : Formatting Date To dd/mm/yyyy Using slice ()

We can also use the slice() function to format the date as dd/mm/yyyy. The slice() function extracts a part of a string and returns it as a new string.

For example, if we have a string like this:

var str = "Hello world!";

We can use the slice() function to extract the word “world” like this:

var world = str.slice(6, 11);

console.log(world); //world

Now that we know how to use the slice() function, let’s see how to format the date as dd/mm/yyyy using it.

We are going to store the day, month, and year in variables like before. We will then use the slice() function to extract the first two characters of the day, month, and year and store it in a new variable called day2, month2, and year2. We will then concatenate day2, month2, and year2 into a string like dd/mm/yyyy.

Let’s see how this works in code:

var today = new Date();

var date = today.toJSON().slice(0, 10);

var day2 = date.slice(8, 10);

var month2 = date.slice(5, 7);

var year2 = date.slice(0, 4);

date = day2 + "/" + month2 + "/" + year2;

console.log(date); //26/04/2022

As you can see, we have successfully formatted the date as dd/mm/yyyy!

There are many ways to format dates in JavaScript. In this article, we have shown you two ways to format the date to string dd/mm/yyyy. Try these methods out and see which one works best for you!