How do I display only specific parts of a date?

Introduction

Full date formats like "Tuesday, October 15, 2024" work well in some contexts, but often you need to display only certain parts of a date. You might want to show just the month and year for a publication date, only the weekday for a calendar, or just the day and month for a birthday.

JavaScript's Intl.DateTimeFormat provides individual options for each date component. Instead of choosing a preset style like "full" or "short", you specify exactly which parts to include and how to format each one.

Understanding date components

A date contains four primary components you can format independently.

The weekday shows which day of the week it is. The year shows which year. The month shows which month of the year. The day shows which day of the month.

Each component accepts different formatting values that control how it displays. You include only the components you need in the options object.

Format the weekday

The weekday option displays the day of the week. It accepts three values that control the length of the output.

const date = new Date('2024-10-15');

const narrow = new Intl.DateTimeFormat('en-US', {
  weekday: 'narrow'
});
console.log(narrow.format(date)); // "T"

const short = new Intl.DateTimeFormat('en-US', {
  weekday: 'short'
});
console.log(short.format(date)); // "Tue"

const long = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});
console.log(long.format(date)); // "Tuesday"

The narrow value produces a single letter. The short value produces an abbreviated name. The long value produces the full weekday name.

Two weekdays can have the same narrow style in some locales. For example, Tuesday and Thursday both start with "T" in English.

Format the year

The year option displays the year. It accepts two values.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  year: 'numeric'
});
console.log(numeric.format(date)); // "2024"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  year: '2-digit'
});
console.log(twoDigit.format(date)); // "24"

The numeric value displays the full year. The 2-digit value displays only the last two digits.

Format the month

The month option displays the month of the year. It accepts five values that provide different levels of detail.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  month: 'numeric'
});
console.log(numeric.format(date)); // "10"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  month: '2-digit'
});
console.log(twoDigit.format(date)); // "10"

const narrow = new Intl.DateTimeFormat('en-US', {
  month: 'narrow'
});
console.log(narrow.format(date)); // "O"

const short = new Intl.DateTimeFormat('en-US', {
  month: 'short'
});
console.log(short.format(date)); // "Oct"

const long = new Intl.DateTimeFormat('en-US', {
  month: 'long'
});
console.log(long.format(date)); // "October"

The numeric value displays the month as a number without leading zeros. The 2-digit value displays the month as a number with leading zeros. The narrow value produces a single letter. The short value produces an abbreviated month name. The long value produces the full month name.

Two months can have the same narrow style in some locales. For example, March and May both start with "M" in English.

Format the day

The day option displays the day of the month. It accepts two values.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  day: 'numeric'
});
console.log(numeric.format(date)); // "15"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  day: '2-digit'
});
console.log(twoDigit.format(date)); // "15"

The numeric value displays the day without leading zeros. The 2-digit value displays the day with leading zeros.

For single-digit days, numeric produces values like "5" while 2-digit produces "05".

Combine multiple date parts

You can specify multiple options in a single formatter to show exactly the combination you need.

const date = new Date('2024-10-15');

// Month and year only
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// Weekday and day only
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// Month and day only
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// All components with custom formatting
const custom = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit'
});
console.log(custom.format(date)); // "Tuesday, Oct 15, 2024"

The formatter automatically arranges the components according to the locale's conventions. You do not need to worry about the order or punctuation.

How options work across locales

The same options produce different outputs in different locales. Each locale follows its own conventions for ordering and formatting date parts.

const date = new Date('2024-10-15');
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024"

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024"

const ja = new Intl.DateTimeFormat('ja-JP', options);
console.log(ja.format(date)); // "2024年10月15日"

const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date)); // "١٥ أكتوبر ٢٠٢٤"

German places the day first and uses a period separator. Japanese uses year-month-day order with Japanese characters. Arabic uses Arabic script for both the month name and numbers.

The weekday and month names also change based on the locale.

const date = new Date('2024-10-15');
const options = {
  weekday: 'long',
  month: 'long'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "Tuesday, October"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "mardi octobre"

const es = new Intl.DateTimeFormat('es-ES', options);
console.log(es.format(date)); // "martes, octubre"

French uses lowercase for both weekday and month names. Spanish also uses lowercase but includes a comma separator.

Common use cases

Displaying month and year works well for publication dates and archive listings.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});

console.log(`Published: ${formatter.format(date)}`);
// "Published: October 2024"

Displaying weekday names works well for calendars and schedules.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});

console.log(`Event on ${formatter.format(date)}`);
// "Event on Tuesday"

Displaying month and day without the year works well for birthdays and annual events.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});

console.log(`Birthday: ${formatter.format(date)}`);
// "Birthday: October 15"

Summary

The Intl.DateTimeFormat options object lets you display specific parts of a date instead of the full date. The weekday option accepts narrow, short, or long. The year option accepts numeric or 2-digit. The month option accepts numeric, 2-digit, narrow, short, or long. The day option accepts numeric or 2-digit.

You can combine multiple options to show exactly the parts you need. The formatter automatically handles ordering and punctuation based on the locale. Different locales use different conventions for displaying the same date components.