Types of Ways to Format a Date in JavaScript

Introduction

Handling and formatting dates is a common requirement in JavaScript applications. JavaScript provides several ways to work with dates, from native methods to powerful libraries like Moment.js and date-fns. In this blog, we will explore different methods to format dates in JavaScript with practical examples.

1. Using Date Object and toLocaleDateString()

The Date object in JavaScript has a method called toLocaleDateString() that formats dates based on locale settings.

Example:

const today = new Date();
console.log(today.toLocaleDateString("en-US")); // Output: MM/DD/YYYY
console.log(today.toLocaleDateString("en-GB")); // Output: DD/MM/YYYY

Key Points:

• You can pass locale codes (e.g., "en-US", "en-GB") to get formatted dates.
• Options like weekday, year, month, and day provide more control.

Example with Options:

const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(today.toLocaleDateString("en-US", options));
// Output: Friday, December 13, 2024

2. Using toISOString()

The toISOString() method formats dates in the ISO 8601 standard format.

Example:

const today = new Date();
console.log(today.toISOString()); 
// Output: 2024-12-13T10:00:00.000Z

Key Points:

• Ideal for APIs and databases.
• Includes timezone information.

3. Custom Formatting with String Manipulation

You can manually extract parts of the date using getFullYear(), getMonth(), and getDate() to create a custom format.

Example:

const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
const day = String(today.getDate()).padStart(2, '0');

console.log(`${year}-${month}-${day}`); 
// Output: 2024-12-13

4. Using Intl.DateTimeFormat API

The Intl.DateTimeFormat API provides a more flexible and localized way to format dates.

Example:

const formatter = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
console.log(formatter.format(new Date())); 
// Output: Dec 13, 2024

Key Points:

• Supports advanced localization options.
• Ideal for consistent formatting across applications.

5. Using External Libraries

a. Moment.js

Although Moment.js is no longer actively maintained, it's still a popular library for date manipulation.

Example:

const moment = require('moment');
console.log(moment().format('YYYY-MM-DD')); 
// Output: 2024-12-13
console.log(moment().format('dddd, MMMM Do YYYY')); 
// Output: Friday, December 13th 2024

b. date-fns

date-fns is a modern library with a functional programming approach.

Example:

const { format } = require('date-fns');
console.log(format(new Date(), 'yyyy-MM-dd')); 
// Output: 2024-12-13
console.log(format(new Date(), 'EEEE, MMMM do yyyy')); 
// Output: Friday, December 13th 2024

c. Day.js

Day.js is a lightweight alternative to Moment.js.

Example:

const dayjs = require('dayjs');
console.log(dayjs().format('YYYY-MM-DD')); 
// Output: 2024-12-13
console.log(dayjs().format('dddd, MMMM D, YYYY')); 
// Output: Friday, December 13, 2024

Comparison of Methods

Conclusion

Formatting dates in JavaScript can be achieved through native methods or external libraries, depending on your project's needs. For simple tasks, the Date object methods like toLocaleDateString() or custom formatting are sufficient. For more advanced requirements, consider using libraries like date-fns or Day.js.

Choose the method that best suits your application's complexity and performance requirements. Happy coding!