How to Format Date in JavaScript: Simple Methods and Examples

In JavaScript, you can format dates using the Date object's toLocaleDateString() method or the Intl.DateTimeFormat API. These let you customize the date format based on locale and options like year, month, and day.

Syntax

The basic syntax to format a date in JavaScript is:

• date.toLocaleDateString([locales[, options]]): Converts a Date object to a string formatted according to locale and options.
• new Intl.DateTimeFormat(locales, options).format(date): Creates a formatter object for dates with specific formatting options.

Parameters:

• locales (optional): A string or array of strings indicating the locale, e.g., 'en-US' or 'fr-FR'.
• options (optional): An object to specify parts of the date to show, like year, month, day, etc.

javascript

const date = new Date();

// Using toLocaleDateString
const formatted1 = date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });

// Using Intl.DateTimeFormat
const formatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
const formatted2 = formatter.format(date);

Example

This example shows how to format the current date in a readable way using toLocaleDateString() with options for full month name, day, and year.

javascript

const date = new Date();

const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = date.toLocaleDateString('en-US', options);

console.log(formattedDate);

Output

April 27, 2024

Common Pitfalls

Some common mistakes when formatting dates in JavaScript include:

• Not specifying a locale, which can lead to unexpected formats depending on the user's environment.
• Using deprecated or manual string manipulation instead of built-in formatting methods.
• Confusing toLocaleDateString() with toString(), which does not format the date nicely.

Always use locale and options to get consistent, readable date formats.

javascript

const date = new Date();

// Wrong: no locale, default format varies
console.log(date.toLocaleDateString());

// Right: specify locale and options
console.log(date.toLocaleDateString('en-GB', { year: 'numeric', month: 'short', day: 'numeric' }));

Output

4/27/2024
27 Apr 2024

Quick Reference

Option	Description	Example Values
year	Format the year	'numeric' (2024), '2-digit' (24)
month	Format the month	'numeric' (4), '2-digit' (04), 'long' (April), 'short' (Apr), 'narrow' (A)
day	Format the day of the month	'numeric' (27), '2-digit' (27)
weekday	Show the day of the week	'long' (Saturday), 'short' (Sat), 'narrow' (S)
hour	Show hour	'numeric', '2-digit'
minute	Show minutes	'numeric', '2-digit'
second	Show seconds	'numeric', '2-digit'

Key Takeaways

Use toLocaleDateString() with locale and options for easy date formatting.

The Intl.DateTimeFormat API offers flexible and reusable date formatting.

Always specify a locale to avoid inconsistent date formats across environments.

Avoid manual string manipulation; rely on built-in methods for accuracy and readability.

Use options like year, month, and day to customize output.