How to Format a Date in JavaScript

Introduction to dates in JavaScript

JavaScript is a popular programming language that enables developers to create dynamic web applications. It provides robust functionality for handling dates and times.

JavaScript provides the Date object to handle and manipulate dates. The Date object allows developers to create, format, and extract information from dates easily.

In this tutorial, we’ll learn how to get dates, format them using different inbuilt methods, and customize their formatting in JavaScript.

Let’s first see how to get dates in JavaScript.

How to use the JavaScript Date object

In JavaScript, the Date() constructor returns a new Date object representing the current date or a specific date. If we create a Date object without any input parameters, it contains the current date and time along with the timezone details. To get a Date object for a specific date, we can pass the date as a string to the Date() constructor.

Here’s an example:

// Creating a new Date() object using the current date (no arguments)
let currentDate = new Date();

console.log(currentDate);

// Creating a new Date() object using a specific date
let specificDate = new Date('01-14-2025');

console.log(specificDate);

You can pass the input date string to the Date() constructor in other formats as well, such as January 14, 2025 or 2025-01-14. However, the newly created Date object stores it in the default format, as you can see in the output:

Wed Feb 12 2025 11:43:26 GMT+0530 (India Standard Time)
Tue Jan 14 2025 00:00:00 GMT+0530 (India Standard Time)

You can also use the Date() constructor without the new operator to get dates, but this will only work for getting the current date.

For example:

// Creating a new Date() object using the current date
let currentDate = Date();

console.log(currentDate);

The Date() constructor returns the formatted date in the same format as new Date(), but in a string:

"Wed Feb 12 2025 11:47:21 GMT+0530 (India Standard Time)"

The default format does the job in many cases. However, it may not work in situations where you want the date in another format. In such cases, you can format the date to get it in your preferred format.

In the next section, you’ll learn some inbuilt date formatting methods in JavaScript.

Inbuilt date formatting methods in JavaScript

The several inbuilt methods for formatting dates in JavaScript include:

• toDateString()
• toISOString()
• toLocaleString()
• toLocaleDateString()

Let’s go through each of these methods.

Using toDateString()

Let’s start with the toDateString() method. This method returns the date portion of a Date object as a human-readable string:

// Creating a new Date() object using the current date
let currentDate = new Date();

// Using the toDateString() method
console.log(currentDate.toDateString());

Here is the output:

Wed Feb 12 2025

Next, let’s discuss the toISOString() method.

Using toISOString()

The toISOString() method formats a given date into an ISO 8601 formatted string:

// Creating a new Date() object using the current date
let currentDate = new Date();

// Using the toISOString() method
console.log(currentDate.toISOString());

Here is the output:

2025-02-12T06:23:35.842Z

The next method on the list is the toLocaleString() method.

Using toLocaleString()

The toLocaleString() method formats a given date according to the system settings on your local machine:

// Creating a new Date() object using the current date
let currentDate = new Date();

// Using the toLocaleString() method
console.log(currentDate.toLocaleString());

Here is the output:

2/12/2025, 11:54:39 AM

Next, let’s understand how the toLocaleDateString() method works.

Using toLocaleDateString()

The toLocaleDateString() method formats the date portion of a given date according to the system settings on your local machine:

// Creating a new Date() object using the current date
let currentDate = new Date();

// Using the toLocaleDateString() method
console.log(currentDate.toLocaleDateString());

Here is the output:

2/12/2025

In the next section, we’ll discover how to get specific parts of a given date in JavaScript.

How to get specific parts of a date in JavaScript

There are some additional inbuilt methods that enable you to get specific parts of a date in JavaScript:

• getFullYear()
• getMonth()
• getDate()

Let’s see how to use each of these methods.

Using getFullYear()

The getFullYear() method returns the year portion of a given date in the yyyy format:

// Creating a new Date() object using the current date
let currentDate = new Date();

// Using the getFullYear() method
console.log(currentDate.getFullYear());

Here is the output:

2025

Next, let’s discuss the getMonth() method.

Using getMonth()

The getMonth() method returns the integer representation of the month of a given date. Since it uses zero-based indexing, it returns an integer between 0-11, where each of them represents a month from January to December respectively:

// Creating a new Date() object using the current date
let currentDate = new Date();

console.log(currentDate.toDateString());

// Using the getMonth() method
console.log(currentDate.getMonth());

Here is the output:

Wed Feb 12 2025
1

As you can see in the output, the current month is February. Hence, the getMonth() method returns the integer 1 representing February.

The next method on the list is the getDate() method.

Using getDate()

The getDate() method returns an integer representing the day of the month in the given date:

// Creating a new Date() object using the current date
let currentDate = new Date();

// Using the getDate() method
console.log(currentDate.getDate());

Here is the output:

12

In the next section, we’ll learn some custom date formatting techniques in JavaScript.

Custom date formatting in JavaScript

If you want to customize the formatting of a date according to your preference in JavaScript, you can use these two techniques:

• String concatenation
• Intl.DateTimeFormat()

Let’s walk through each of these techniques.

Using string concatenation

Firstly, let’s talk about the string concatenation technique. This technique provides a simple way to format a given date by manually constructing a string.

Here is an example:

// Creating a new Date() object using the current date
let currentDate = new Date();

// Using string concatenation
let formattedDate = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`;

console.log(formattedDate);

This example first extracts the day of the month, the month, and the year from the given date and then combines all of them in a string to create a dd/mm/yyyy format. Moreover, it adds 1 to currentDate.getMonth() to get the integer representation of the month in the range 1-12 instead of 0-11.

Here is the output:

12/2/2025

Next, let’s understand how the Intl.DateTimeFormat() method works.

Using Intl.DateTimeFormat()

The second technique is using the Intl.DateTimeFormat() method. This method provides various options and powerful localization support for formatting dates in JavaScript.

Here is an example:

// Creating a new Date() object using the current date
let currentDate = new Date();

// Using the Intl.DateTimeFormat() method
let formattedDate = new Intl.DateTimeFormat("en-US");

console.log(formattedDate.format(currentDate));

In this example:

• new Intl.DateTimeFormat("en-US"): Returns a new DateTimeFormat object with the time format set to en-US (United States, DD/MM/YYYY).
• format(): This method formats the given date according to the time format specified in the DateTimeFormat object (DD/MM/YYYY).

Here is the output:

2/12/2025

By understanding these techniques, we can efficiently customize the format of a date according to our preferences.

Conclusion

In this tutorial, we explored how to get dates in JavaScript, format them using different inbuilt methods, and covered the techniques that you can use for customized date formatting in JavaScript.

Understanding date formatting in JavaScript is essential for developing applications that require clear and user-friendly date representations. By leveraging these built-in methods and custom techniques, you can present dates in a variety of formats suitable for different use cases.

If you want to learn how to build interactive websites using JavaScript, check out the Building Interactive JavaScript Websites course on Codecademy.