How to Format a Date in JavaScript

Dates are a fundamental part of many JavaScript applications. They are used to represent time, schedule events, and perform calculations. However, working with dates can be tricky due to the complexities of time zones, daylight saving time, and different date formats. In this article, we will explore some of the best practices for working with dates in JavaScript.

Before we dive into date formatting, let's take a moment to understand the importance of date formatting in web development. Dates are a fundamental part of many applications, and displaying them correctly is crucial for user experience. Whether you're building a blog, an e-commerce site, or a social media platform, you'll likely need to format dates in a way that makes sense to your users.

Date formatting is the process of converting a date object into a human-readable string. This can involve changing the order of day, month, and year, adding time zones, or even displaying relative dates (like "2 days ago").

How to Use the JavaScript Date Object to Format Dates

The JavaScript Date object is used to work with dates and times. It provides methods for getting and setting date and time values, as well as formatting dates in various ways. To create a new Date object, you can use the following syntax:

const date = new Date();
console.log(now);

The above code creates a new Date object representing the current date and outputs it to the console. You can also create a Date object for a specific date and time by passing a string or number to the Date constructor:

const date = new Date('2023-10-01T12:00:00Z');
console.log(date);

above code creates a Date object representing October 1, 2023, at 12:00 PM UTC. You can also create a Date object using individual date and time components:

const date = new Date(2023, 9, 1, 12, 0, 0); // Note: Months are zero-indexed (0 = January, 1 = February, etc.)
console.log(date);

The above code creates a Date object representing October 1, 2023, at 12:00 PM local time.

Commonly Used JavaScript Date Formatting Methods

JavaScript provides a few built-in methods to format dates conveniently. Let's take a look at some of these methods:

toDateString(): This method returns the date portion of a Date object as a string, in a human-readable format. For example:
```
const date = new Date('2023-10-01T12:00:00Z');
console.log(date.toDateString()); // Outputs: Sun Oct 01 2023
```
toISOString(): This method returns the date in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ), which is useful for storing dates in databases or sending them over APIs. For example:
```
const date = new Date('2023-10-01T12:00:00Z');
console.log(date.toISOString()); // Outputs: 2023-10-01T12:00:00.000Z
```
toLocaleDateString(): This method returns the date portion of a Date object as a string, formatted according to the locale and options provided. For example:
```
const date = new Date('2023-10-01T12:00:00Z');
console.log(date.toLocaleDateString('en-US')); // Outputs: 10/1/2023
```
toLocaleString(): This method returns the date and time portion of a Date object as a string, formatted according to the locale and options provided. For example:
```
const date = new Date('2023-10-01T12:00:00Z');
console.log(date.toLocaleString('en-US')); // Outputs: 10/1/2023, 12:00:00 PM
```
toUTCString(): This method returns the date and time portion of a Date object as a string, formatted in UTC (Coordinated Universal Time). For example:
```
const date = new Date('2023-10-01T12:00:00Z');
console.log(date.toUTCString()); // Outputs: Sun, 01 Oct 2023 12:00:00 GMT
```
toTimeString(): This method returns the time portion of a Date object as a string, in a human-readable format. For example:
```
const date = new Date('2023-10-01T12:00:00Z');
console.log(date.toTimeString()); // Outputs: 12:00:00 GMT+0000 (Coordinated Universal Time)
```
The JavaScript Date object provides several other methods for formatting dates. Here are some commonly used methods:
1. getDate(): Returns the day of the month (1-31) for the specified date.- getMonth(): Returns the month (0-11) for the specified date.
2. getFullYear(): Returns the four-digit year for the specified date.
3. getHours(): Returns the hour (0-23) for the specified date.
4. getMinutes(): Returns the minutes (0-59) for the specified date.
5. getSeconds(): Returns the seconds (0-59) for the specified date.
6. getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC for the specified date.

How to do Custom Date Formatting in JavaScript

In addition to the built-in formatting methods, you can create custom date formats using string manipulation. Javascript provides a couple of methods to achieve this. You can use the get methods to extract the individual components of a date and then format them as needed. Here's an example of how to create a custom date format:

String Concatenation : One way to create a custom date format is by using string concatenation. You can extract the individual components of a date and concatenate them into a string in the desired format. For example, to format a date as "DD/MM/YYYY", you can do the following:
```
const date = new Date('2023-10-01T12:00:00Z');
const formattedDate = ``${String(date.getDate()).padStart(2, "0")}/${String(
    date.getMonth() + 1
).padStart(2, "0")}/${date.getFullYear()}``;
console.log(formattedDate); // Outputs: 01/10/2023
```
You can manipulate the however you want to format the date and come up with a custom format.
Intl.DateTimeFormat : The Intl.DateTimeFormat object is a built-in object in JavaScript that allows you to format dates and times according to the locale and options you specify. It provides a more flexible way to format dates compared to string concatenation. For example, to format a date as "DD/MM/YYYY" using Intl.DateTimeFormat, you can do the following:
```
const date = new Date('2023-10-01T12:00:00Z');
const options = {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
};
const formatter = new Intl.DateTimeFormat('en-GB', options);
const formattedDate = formatter.format(date);
console.log(formattedDate); // Outputs: 01/10/2023
```
Using Intl.DateTimeFormat, you can specify the desired locale and various options to format dates precisely as needed. There are more options you can use in the Intl.DateTimeFormat object, such as hour, minute, second, weekday, etc. You can refer to the MDN documentation for more details on the available options.

Handle Different Time Zones with Dates in JavaScript

When working with dates and times, it's essential to consider time zones, especially if your application is used in different regions. JavaScript provides several ways to handle time zones:

Time Zone Offset: The Date object has a method called getTimezoneOffset() that returns the time zone offset in minutes from UTC. You can use this method to adjust the date and time based on the user's local time zone.

Displaying Time Zones: You can use the toLocaleString() method with the timeZone option to display the date and time in a specific time zone. For example to display the date and time in New York (Eastern Time), you can do the following:

const date = new Date('2023-10-01T12:00:00Z');
const options = {
    timeZone: 'America/New_York',
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
};
const formatter = new Intl.DateTimeFormat('en-US', options);
const formattedDate = formatter.format(date);
console.log(formattedDate); // Outputs: 10/01/2023, 08:00 AM

Date Formatting Patterns in JavaScript

When formatting dates in JavaScript, you can use various patterns to represent different components of the date. Here are some commonly used patterns:

YYYY: Four-digit year (e.g., 2023)
MM: Two-digit month (01-12)
DD: Two-digit day of the month (01-31)
HH: Two-digit hour in 24-hour format (00-23)
hh: Two-digit hour in 12-hour format (01-12)
mm: Two-digit minutes (00-59)
ss: Two-digit seconds (00-59)
A: AM/PM indicator (uppercase)
a: am/pm indicator (lowercase)

You can use these patterns to create custom date formats.

For example, to format a date as "DD/MM/YYYY", you can do the following:

const date = new Date('2023-10-01T12:00:00Z');
const formattedDate = ``${String(date.getDate()).padStart(2, '0')}/${String(date.getMonth() + 1).padStart(2, '0')}/${date.getFullYear()}``;
console.log(formattedDate); // Outputs: 01/10/2023

Third-Party Libraries for Date Formatting

While JavaScript provides built-in methods for date formatting, you may find it easier to use third-party libraries for more complex date manipulations. Some popular libraries include:

Moment.js: A widely used library for parsing, validating, manipulating, and formatting dates. It provides a simple API for date formatting and supports various locales.
date-fns: A lightweight library that provides utility functions for date manipulation and formatting. It allows you to import only the functions you need, making it a great choice for performance.
Luxon: A modern library for working with dates and times, built on the Intl API. It provides a clean API for date formatting and supports time zones and localization.
Day.js: A lightweight alternative to Moment.js, with a similar API. It provides date formatting and manipulation functions while being smaller in size.

Conclusion

In conclusion, the JavaScript Date object provides various methods for formatting dates and times. You can use built-in methods like toDateString(), toISOString(), and toLocaleDateString() for common formatting tasks. For custom date formats, you can use string manipulation or the Intl.DateTimeFormat object. Additionally, consider using third-party libraries like Moment.js, date-fns, Luxon, or Day.js for more complex date manipulations and formatting. By understanding how to work with dates in JavaScript, you can effectively handle date and time operations in your applications.

How to Format a Date in JavaScript

How to Use the JavaScript Date Object to Format Dates

Commonly Used JavaScript Date Formatting Methods

How to do Custom Date Formatting in JavaScript

Handle Different Time Zones with Dates in JavaScript

Date Formatting Patterns in JavaScript

Third-Party Libraries for Date Formatting

Conclusion

Share this

Vishal G.

Read Next

How to use Shopify Section Rendering API to load Dynamic Sections

How to Exchange a Shopify session token for an access token with GraphQL

How to intercept JavaScript Fetch API requests and responses