JavaScript Date Formats: A Comprehensive Guide

Working with dates and times is an inevitable part of the job as a software developer. Whether you are working on a web application, a mobile app, or any other software project, you will almost always have to deal with dates and times in some way. JavaScript is one of the most widely used programming languages, and it provides a rich set of tools for working with dates and times. In this article, we will explore JavaScript date formats, which are essential for any developer who needs to work with dates and times in JavaScript.

What are Date Formats?

A date format is a string that specifies how a date should be formatted. Date formats are used to display dates in a human-readable form, and they can vary depending on the region, language, and culture. In JavaScript, date formats are specified using a combination of letters and special characters, such as slashes, hyphens, and colons.

The Date Object in JavaScript

In JavaScript, the Date object is used to work with dates and times. The Date object represents a single moment in time, and it provides methods for working with dates and times in various formats. To create a new Date object in JavaScript, you can use the following syntax:

let currentDate = new Date();

This creates a new Date object that represents the current date and time.

Formatting Dates in JavaScript

JavaScript provides several methods for formatting dates. The most commonly used method is the toLocaleDateString() method, which returns a string that represents the date in the current locale’s format. The toLocaleDateString() method takes two optional parameters: the locale and the options.

Using the toLocaleDateString() Method

The toLocaleDateString() method is used to format a date in the current locale’s format. Here is an example:

let currentDate = new Date();
let formattedDate = currentDate.toLocaleDateString();
console.log(formattedDate);

This will output the date in the current locale’s format. For example, if you are in the United States, the output will be in the format “MM/DD/YYYY”.

Specifying a Locale

You can also specify a locale to use for formatting the date. The locale is specified as a string that contains a language code and a country code, separated by a hyphen. For example, “en-US” represents the English language as used in the United States. Here is an example:

let currentDate = new Date();
let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let formattedDate = currentDate.toLocaleDateString('en-US', options);
console.log(formattedDate);

This will output the date in the format “Thursday, March 21, 2023” for the English language as used in the United States.

Specifying Options

You can also specify options to use for formatting the date. The options are specified as an object that contains one or more of the following properties:

• weekday: specifies the weekday to include in the output (either “narrow”, “short”, or “long”).
• year: specifies the year to include in the output (either “numeric” or “2-digit”).
• month: specifies the month to include in the output (either “numeric”, “2-digit”, “narrow”, “short”, or “long”).
• day: specifies the day to include in the output (either “numeric” or “2-digit”).

Here is an example:

let currentDate = new Date();
let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let formattedDate = currentDate.toLocaleDateString(undefined, options);
console.log(formattedDate);

This will output the date in the format “Thursday, March 21, 2023”.

Formatting Dates with Moment.js

Moment.js is a popular JavaScript library for working with dates and times. It provides a wide range of features and methods for working with dates and times, including parsing, formatting, and manipulating dates. To use Moment.js, you first need to include it in your project:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Once you have included Moment.js, you can use its formatting methods to format dates. The most commonly used method is the format() method, which takes a format string as its argument and returns a string that represents the date in the specified format.

Here is an example:

let currentDate = moment();
let formattedDate = currentDate.format('MMMM Do YYYY, h:mm:ss a');
console.log(formattedDate);

This will output the date in the format “March 21st 2023, 3:43:29 pm”.

Moment.js provides a wide range of tokens that can be used in the format string to represent different parts of the date and time. Here are some of the most commonly used tokens:

• YYYY: the year (e.g., “2023”).
• YY: the year in two digits (e.g., “23”).
• MMMM: the full name of the month (e.g., “March”).
• MMM: the abbreviated name of the month (e.g., “Mar”).
• MM: the month in two digits (e.g., “03”).
• M: the month without leading zeros (e.g., “3”).
• DD: the day of the month in two digits (e.g., “21”).
• D: the day of the month without leading zeros (e.g., “21”).
• dddd: the full name of the weekday (e.g., “Tuesday”).
• ddd: the abbreviated name of the weekday (e.g., “Tue”).
• HH: the hour in two digits (e.g., “15” for 3 PM).
• H: the hour without leading zeros (e.g., “3” for 3 PM).
• mm: the minute in two digits (e.g., “43”).
• m: the minute without leading zeros (e.g., “43”).
• ss: the second in two digits (e.g., “29”).
• s: the second without leading zeros (e.g., “29”).
• a: “am” or “pm” in lowercase (e.g., “pm”).

Here is an example that uses several of these tokens:

let currentDate = moment();
let formattedDate = currentDate.format('dddd, MMMM Do YYYY, h:mm:ss a');
console.log(formattedDate);

This will output the date in the format “Tuesday, March 21st 2023, 3:43:29 pm”.

Conclusion

Working with dates and times in JavaScript can be a challenging task, but with the right tools and knowledge, it can be a breeze. In this article, we have explored the basics of JavaScript date formats and how to use them to format dates in various ways. We have also introduced Moment.js, a popular JavaScript library for working with dates and times, and demonstrated how to use its formatting methods to format dates. By mastering JavaScript date formats, you can create powerful and flexible software that meets the needs of your users and customers.

📕 Related articles about Javascript

• Everything You Need to Know About JavaScript Arrays
• JavaScript Undefined: Understanding the Concept and Best Practices
• Everything You Need to Know About JavaScript Variables
• Understanding JavaScript Array Const
• How to Learn Javascript Advanced Techniques
• JavaScript Loop For Of: An In-depth Guide