Formatting Dates in JavaScript

Sandhiya Priya
16h
1.7k
0
0

Article

In JavaScript, dates are crucial elements when dealing with time-related data. Whether you’re building a web app that displays dates to users or handling backend data from APIs, understanding how to manipulate and format dates is essential.

JavaScript offers a variety of methods to create, manipulate, and format dates, and there are multiple ways to display dates depending on the use case, region, or preferred format. This article will cover various techniques for handling and formatting dates in JavaScript, exploring both built-in methods and external libraries.

1. The Basics: Creating and Manipulating Dates in JavaScript

Creating a Date Object

In JavaScript, the Date object represents a single moment in time and provides methods to handle dates and times. You can create a new Date object in several ways:

// Create a new Date object with the current date and time
var currentDate = new Date();

// Create a Date object from a specific date (string format)
var specificDate = new Date('2025-11-05'); // YYYY-MM-DD format

// Create a Date object from a date and time string (ISO format)
var detailedDate = new Date('2025-11-05T14:30:00'); // ISO 8601 format

// Create a Date object using individual components: year, month, day, etc.
var customDate = new Date(2025, 10, 5); // Note: months are 0-indexed (0 = January, 10 = November)

Getting Date Components

Once you have a Date object, you can extract specific components, like the year, month, day, hours, minutes, etc.

var date = new Date('2025-11-05T14:30:00');

// Get the full year (e.g., 2025)
var year = date.getFullYear();

// Get the month (0-11, where 0 is January, 11 is December)
var month = date.getMonth(); // 10 for November

// Get the day of the month (1-31)
var day = date.getDate(); // 5

// Get the day of the week (0-6, where 0 is Sunday)
var weekday = date.getDay(); // 3 for Wednesday

// Get the hours, minutes, and seconds
var hours = date.getHours(); // 14
var minutes = date.getMinutes(); // 30
var seconds = date.getSeconds(); // 0

2. Formatting Dates in JavaScript

JavaScript provides a variety of built-in functions to format dates for display. These methods allow you to customize the date format for different regions, languages, and time zones.

toLocaleDateString() Method

The toLocaleDateString() method formats a date based on the user’s locale. This method can also accept options for customizing the format.

var date = new Date('2025-11-05');

// Format as "MM/DD/YYYY" in U.S. format
console.log(date.toLocaleDateString('en-US')); // "11/5/2025"

// Format as "DD/MM/YYYY" in UK format
console.log(date.toLocaleDateString('en-GB')); // "05/11/2025"

// Format with weekday and month names
console.log(date.toLocaleDateString('en-US', {
  weekday: 'long', // "Wednesday"
  year: 'numeric', // "2025"
  month: 'long', // "November"
  day: 'numeric' // "5"
})); // "Wednesday, November 5, 2025"

toLocaleString() Method

You can also use toLocaleString() to get a formatted string that includes both date and time. Similar to toLocaleDateString(), it allows customization of the output format.

var date = new Date('2025-11-05T14:30:00');

// Display date and time in US format
console.log(date.toLocaleString('en-US')); // "11/5/2025, 2:30:00 PM"

// Display date and time in UK format
console.log(date.toLocaleString('en-GB')); // "05/11/2025, 14:30:00"

toISOString() Method

The toISOString() method returns a string in the ISO 8601 format, which is ideal for APIs, databases, or when you need a standardized date format. This includes the date and time in UTC.

var date = new Date('2025-11-05T14:30:00');

// Display date in ISO 8601 format
console.log(date.toISOString()); // "2025-11-05T14:30:00.000Z"

toUTCString() Method

The toUTCString() method returns the date in UTC (Coordinated Universal Time) in a human-readable format.

var date = new Date('2025-11-05T14:30:00');

// Display date in UTC format
console.log(date.toUTCString()); // "Wed, 05 Nov 2025 14:30:00 GMT"

Custom Formatting: Manually Building the Date Format

If you need to create a completely custom format, you can extract the components from the Date object and concatenate them manually.

var date = new Date('2025-11-05');

// Custom format: "DD-MMM-YYYY"
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var formattedDate = ("0" + date.getDate()).slice(-2) + "-" + months[date.getMonth()] + "-" + date.getFullYear();
console.log(formattedDate); // "05-Nov-2025"

3. Handling Time Zones

Handling time zones correctly is crucial for global applications. JavaScript’s Date object uses the client’s local time zone by default. However, you can work with specific time zones using libraries like luxon or moment-timezone.

Working with UTC

You can explicitly convert to UTC by using the Date object’s getUTC methods.

var date = new Date('2025-11-05T14:30:00');

// Get UTC components
var utcHours = date.getUTCHours(); // 14 (UTC)
console.log(utcHours);

Using Libraries for Time Zone Support

While JavaScript does not natively support time zone conversion, libraries like Luxon or Moment.js make this easier.

Luxon Example

// Luxon (recommended for modern applications)
var { DateTime } = require('luxon');

// Parse and format the date in a specific time zone
var dt = DateTime.fromISO('2025-11-05T14:30:00', { zone: 'America/New_York' });
console.log(dt.toString()); // "2025-11-05T14:30:00.000-05:00"

Moment.js Example

// Moment.js (legacy library)
var moment = require('moment-timezone');

// Format the date in a specific time zone
var formattedDate = moment.tz('2025-11-05T14:30:00', 'America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // "2025-11-05 14:30:00"

Note that moment.js is now in maintenance mode, and newer projects should consider using Luxon or date-fns.

4. Common Date Formats in JavaScript

There are many date formats that can be useful in various contexts, such as for internationalization, APIs, or user interfaces.

ISO 8601 Format (YYYY-MM-DD): Standard for databases and APIs.

var date = new Date('2025-11-05');
console.log(date.toISOString().split('T')[0]); // "2025-11-05"

US Format (MM/DD/YYYY): Commonly used in the United States.

var date = new Date('2025-11-05');
console.log(date.toLocaleDateString('en-US')); // "11/5/2025"

European Format (DD/MM/YYYY): Common in Europe.

var date = new Date('2025-11-05');
console.log(date.toLocaleDateString('en-GB')); // "05/11/2025"

Custom Format (DD-MMM-YYYY): A more readable format used in informal settings.

var date = new Date('2025-11-05');
console.log(formatDate(date)); // "05-Nov-2025"

5. Handling "Time Ago" Formats

For more human-friendly date formats, like "3 days ago" or "5 hours ago", JavaScript does not provide built-in support, but libraries like date-fns or moment.js are commonly used.

Using date-fns to Display "Time Ago":

import { formatDistanceToNow } from 'date-fns';

var date = new Date('2025-11-05');
console.log(formatDistanceToNow(date) + ' ago'); // "3 years ago"

Conclusion

In JavaScript, handling and formatting dates is flexible and adaptable to various needs. Whether you’re working with APIs, building a user interface, or dealing with different time zones, understanding how to use the Date object and external libraries will enable you to format and manipulate dates efficiently.

For more complex date operations or better support for time zones and localization, consider using modern libraries like Luxon or date-fns. They simplify many common tasks and offer more flexibility than the native Date object.