How to Format a Date in JavaScript ?

In this article, we will learn about the different ways of formatting a Date object into different date strings of different formats using JavaScript.

The below list contains the different ways of formatting Date in JavaScript:

Method 1: Using the toDateString() method

The toDateString() method formats the date object into a human-readable format as Day Month Date Year.

Syntax:

dateObj.toDateString();

Example: The below code example explains the use of the toDateString() method to format the date.

Javascript

const currentDate = new Date();
const formattedDate = currentDate.toDateString();
console.log(formattedDate);

Output

Fri Dec 29 2023

Method 2: Using the toISOString() method

The toISOString() method will format the data into the International Standards following the ISO 8601 format.

Syntax:

dateObj.toISOString();

Example: The below code example implements the toISOString() method to format the date object.

Javascript

const currentDate = new Date();
const formattedDate = currentDate.toISOString();
console.log(formattedDate);

Output

2023-12-29T09:39:27.634Z

Method 3: Using the toLocaleDateString() method

This method will format the date part of the date object into the same format as acquired by your system or in the specified format.

Syntax:

dateObj.toLocaleDateString();

Example: The below code example converts the date into the format acquired by your system.

Javascript

const currentDate = new Date();
const formattedLocalDate = currentDate.toLocaleDateString();
const formattedInSpecifiedFormat = currentDate.toLocaleDateString("hi-IN");
console.log(formattedLocalDate);
console.log(formattedInSpecifiedFormat);

Output

12/29/2023
29/12/2023

Method 4: Using the toLocaleString() method

This method will work in the similar way as the toLocaleDateString() works. The only difference is that it also returns the time with the formatted string.

Syntax:

dateObj.toLocaleString();

Example: The below example uses the toLocaleString() method to format the date.

Javascript

const currentDate = new Date();
const formattedLocalDate = currentDate.toLocaleString();
const formattedInSpecifiedFormat = currentDate.toLocaleString("hi-IN");
console.log(formattedLocalDate);
console.log(formattedInSpecifiedFormat);

Output

12/29/2023, 9:39:27 AM
29/12/2023, 9:39:27 am

Method 5: Using the Intl.DateTimeFormat() object method

This is a powerful object method to format the date object. It formats the date into specified format and with the specified options for formatting the date and time.

Syntax:

const formatObj = new Intl.DateTimeFormat("en-US");
formatObj.format(dateObj);

Example: The below example formats the date object using the intl.DateTimeFormat() object method.

Javascript

const currentDate = new Date();
const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {dateStyle: 'long'});
const formattedDate = dateTimeFormatter.format(currentDate);
console.log(formattedDate);

Output

December 29, 2023

Method 6: Manually format date using Date methods

In this approach, we will use the different date methods to get the day, date, month and year of the date object and then concat them to form a formatted date string.

Example: The below code example uses the different date methods to get date and format it.

Javascript

const weekDays =
['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const monthsArr =
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const currentDateObj = new Date();
const currentDay = weekDays[currentDateObj.getDay()];
const currentDate  = currentDateObj.getDate();
const currentMonth  = monthsArr[currentDateObj.getMonth()];
const currentYear = currentDateObj.getFullYear();
console.log(`${currentDay} ${currentDate} ${currentMonth}, ${currentYear}`);

Output

Fri 29 Dec, 2023