How to Format Dates in JavaScript

by

Javascript is essentially a scripting language used for web development. The main goal of Javascript is to provide interactiveness to web pages. For example, it is necessary to frequently store the information related to the dates and times in web services.

When a user takes a subscription to any platform, Javascript can store the information related to the data and time to give access to a subscription to the user precisely the correct amount of time.

Javascript has built-in date and time formatting methods, making it easier for the developers to display the date and time.

Format Dates in JavaScript

To format dates in JavaScript, use the Date() constructor. First, the Date objects are created with the new Date() constructor. Then, the Date() constructor is used to get details about the date and time.

Syntax

new Date()

Arguments

The arguments are optional, but it accepts day, month, year, hour, minute, seconds, and milliseconds.

Return value

The new Date() constructor returns the current date and time in the form of string representation in the day, month, year, hour, minute, seconds, milliseconds in UTC format.

Example

let date = new Date();
console.log(date);

Output

2022-03-17T13:33:23.972Z

Format dates using new Date()

The new Date(year, month, …) creates a new date object with a specified date and time. The optional arguments specify year, month, day, hour, minute, second, and milliseconds in the same order.

let formattedDate = new Date(2022, 03, 17, 12, 45, 37, 10);
console.log(formattedDate);

Output

2022-04-17T07:15:37.010Z

You can also pass only year, month, and day to the new Date() constructor.

let formattedDate = new Date(2022, 03, 17);
console.log(formattedDate);

Output

2022-04-16T18:30:00.000Z

Creating the dates through arguments: You can give arguments to the date objects to specify the format you want to get the dates.

Syntax

Date(year, month, day, hour, minute, second);

Output format

day month date year hour:minute: seconds UTC

Examples

If you store it in some variable, it will give that date in a similar format.

Example 1:

let p = new Date(2022, 10, 20, 8, 3, 9);
console.log(p);

Output

2022-11-20T02:33:09.000Z

If you do not store it in some variable, it will return your current date and time.

Example 2:

console.log(Date(2012, 6, 11, 8, 3, 9));

Output

Thu Mar 17 2022 20:09:08 GMT+0530 (India Standard Time)

 

JavaScript format dates using toLocaleString() function

The toLocaleString() is a built-in JavaScript function that formats date and time in DD/MM/YYYY format and time as hour:minute: second format. The toLocaleString() function returns a string with a language-sensitive date representation.

The toLocaleString() function accepts locales and options as arguments used to define the language whose formatting conventions should be used and customize the function’s behavior.

Syntax

toLocaleString(locales, options)

Arguments

The locales and options arguments are optional that can be used to specify the formatting conventions.

Return value

It returns the current date in DD/MM/YYYY format.

Example

let date = new Date();
console.log(date.toLocaleString('en-UK'));

Output

17/03/2022, 19:35:24

In this example, we are formatting the dates based on UK locales.

To get the format of the language used in your application, specify that language using the locales arguments.

let date = new Date(Date.UTC(2022, 03, 17, 3, 0, 0));

console.log(date.toLocaleString('en-US'));

console.log(date.toLocaleString('en-GB'));

console.log(date.toLocaleString('ko-KR'));

console.log(date.toLocaleString('ar-EG'));

console.log(date.toLocaleString('ja-JP-u-ca-japanese'));

console.log(date.toLocaleString(['ban', 'id']));

Output

4/17/2022, 8:30:00 AM
17/04/2022, 08:30:00
2022. 4. 17. 오전 8:30:00
١٧/٤/٢٠٢٢, ٨:٣٠:٠٠ ص
R4/4/17 8:30:00
17/4/2022 08.30.00

In this example, we are printing the dates in different world locales.

Customizing specific sections

We can personalize certain areas of the delivered result with function toLocaleString() by adjusting the corresponding parameters. The names and types of parameters available for formatting time strings are listed below:

Example

date = new Date();

console.log(date.toLocaleString('en-US', {
 weekday: 'short', 
 day: 'numeric',
 year: 'numeric',
 month: 'long', 
 hour: 'numeric',
 minute: 'numeric',
 second: 'numeric',
}));

Output

Thu, March 17, 2022, 7:49:51 PM

The user can specify the data type of the days, months, etc., in the format in which he wants the dates to be displayed.

Creating dates with a timestamp in JavaScript

Timestamp in JavaScript is defined as the number of milliseconds passed since 1 January 1970 (1 January 1970 is also known as Unix epoch time). Although this is rarely used still, developers can sometimes use this format.

Syntax

new Date(milliseconds)

Arguments

It takes several milliseconds, which has an integer data type.

Return value

The new Date(milliseconds) function returns the current date in the form of string representation in day month date year hour:minute: seconds UTC format.

Example

new Date(1661177777777)

Output

Mon Aug 22 2022 19:46:17 GMT+0530 (India Standard Time)

This means that since  1 January 1970, 1661177777777 milliseconds had passed when Javascript displayed the current time.

That’s it for this tutorial.

Leave a Comment