JavaScript Date Formats

JavaScript stores dates as milliseconds since January 01, 1970. Zero time is January 01, 1970 00:00:00 UTC. One day (24 hours) is 86 400 000 milliseconds.

To create a new Date object, you can use the new Date() constructor. For example, the following code creates a new Date object for the current date and time:

const now = new Date();

You can also pass a string representation of a date to the Date() constructor. For example, the following code creates a new Date object for the date “2023-10-14 00:44:06 PST”:

const date = new Date("2023-10-14 00:44:06 PST");

Once you have a Date object, you can use its methods to get and set the year, month, day, hour, minute, second, and millisecond of the date. You can also use its methods to format the date in a variety of ways.

Formatting dates in JavaScript

There are two main ways to format dates in JavaScript:

Using the toLocaleDateString() method

Using the toLocaleTimeString() method

The toLocaleDateString() method formats a date according to the user’s locale. The toLocaleTimeString() method formats a time according to the user’s locale.

For example, the following code formats the current date in the user’s locale:

const formattedDate = now.toLocaleDateString();

The following code formats the current time in the user’s locale:

const formattedTime = now.toLocaleTimeString();

You can also pass arguments to the toLocaleDateString() and toLocaleTimeString() methods to specify additional formatting options. For example, the following code formats the current date in the MM/DD/YYYY format:

const formattedDate = now.toLocaleDateString("en-US", {
year: "numeric",
month: "numeric",
day: "numeric",
});

The following code formats the current time in the HH:mm:ss format:

const formattedTime = now.toLocaleTimeString("en-US", {
hour: "numeric",
minute: "numeric",
second: "numeric",
});

Custom date formats

In addition to using the toLocaleDateString() and toLocaleTimeString() methods, you can also use custom date formats in JavaScript.

To create a custom date format, you can use the following steps:

Create a new object and assign it to the options variable.

Set the format property of the options object to your desired date format.

Pass the options object to the toLocaleDateString() or toLocaleTimeString() method.

For example, the following code creates a custom date format that displays the date in the MM/DD/YYYY format:

const options = {
format: "MM/DD/YYYY",
};
const formattedDate = now.toLocaleDateString("en-US", options);

The following code creates a custom date format that displays the time in the HH:mm:ss format:

const options = {
format: "HH:mm:ss",
};
const formattedTime = now.toLocaleTimeString("en-US", options);

Conclusion

JavaScript provides a variety of ways to format dates. You can use the toLocaleDateString() and toLocaleTimeString() methods to format dates according to the user’s locale. You can also use custom date formats to format dates in any way you want.