Why bother with this instead of just using .toLocaleDateString()?

You've probably already used .toLocaleDateString() or .toLocaleString(). They're fine for a quick one-off print, but here is the deal: they are expensive. Every time you call those methods, JavaScript has to resolve the locale and initialize the formatting engine from scratch.

If you're rendering a table with 500 rows of dates, calling .toLocaleDateString() 500 times will noticeably lag your UI. I always recommend Intl.DateTimeFormat because it lets you create a formatter object once and reuse it. It's significantly more performant.

const dates = [new Date(2023, 0, 1), new Date(2023, 1, 1), new Date(2023, 2, 1)];
const formatter = new Intl.DateTimeFormat('en-US');

// I'm reusing the same 'formatter' instance here
const formattedDates = dates.map(date => formatter.format(date));

How do I get specific formats, like "Tuesday, October 24"?

The magic happens in the options object you pass as the second argument. You don't have to guess string patterns (like "MM/DD/YYYY"); instead, you tell JavaScript what pieces of data you want and how they should look (numeric, 2-digit, long, or short).

Let's say you're building a "Last Modified" label for a blog post. You probably want it to look professional and readable, not like a raw system timestamp.

const lastModified = new Date('2023-11-15T14:30:00');
const options = { 
  weekday: 'long', 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
};

const formatter = new Intl.DateTimeFormat('en-US', options);
console.log(formatter.format(lastModified)); 
// Output: "Wednesday, November 15, 2023"

Can I force a specific time zone or locale regardless of the user's browser?

Yes, and this is where Intl really saves you from writing a mountain of manual string manipulation. By changing the first argument (the locale), the order of day/month/year swaps automatically. You can also pass a timeZone option to ensure everyone sees the date in a specific region's time, regardless of where they are physically located.

I've found this incredibly useful for scheduling apps where the event happens in New York, but the user is in Tokyo.

const eventDate = new Date('2024-12-25T10:00:00Z');

const nyFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeStyle: 'short',
  dateStyle: 'medium'
});

const londonFormatter = new Intl.DateTimeFormat('en-GB', {
  timeZone: 'Europe/London',
  timeStyle: 'short',
  dateStyle: 'medium'
});

console.log(`NY: ${nyFormatter.format(eventDate)}`);     // Dec 25, 2024, 5:00 AM
console.log(`London: ${londonFormatter.format(eventDate)}`); // 25 Dec 2024, 10:00

📋 Practical Task

Exercise: Building a Localized Event Timestamp Formatter

You are building a dashboard for a global webinar series. You need to create a function called formatWebinarDate that takes a Date object, a locale string (e.g., 'en-US', 'fr-FR', 'ja-JP'), and a timeZone string.

Your function should return a formatted string that includes:

• The full name of the weekday (e.g., "Monday")
• The full name of the month (e.g., "January")
• The numeric day of the month
• The numeric year
• The time in a "short" format (e.g., "3:30 PM")

Test your function with these requirements:

const webinarDate = new Date('2024-05-20T15:00:00Z');

// Should format for a user in France using French locale and Paris time
console.log(formatWebinarDate(webinarDate, 'fr-FR', 'Europe/Paris'));

// Should format for a user in the US using English locale and New York time
console.log(formatWebinarDate(webinarDate, 'en-US', 'America/New_York'));