How to format dates as short, medium, long, or full

Introduction

Formatting dates requires choosing which components to display and how to display them. You might show the weekday, month name, day number, year, hours, minutes, and time zone. Each component has its own formatting options. Configuring all these options individually creates verbose code and requires understanding which combinations work well together.

JavaScript's Intl.DateTimeFormat provides preset styles that bundle common formatting choices into simple options. Instead of specifying that you want a numeric month, numeric day, and numeric year, you can request dateStyle: "short". Instead of configuring hour, minute, and second display, you can request timeStyle: "medium".

These presets work across all locales. The same style produces appropriate output whether formatting for US English, German, Japanese, or Arabic. This lesson explains what each style level provides and when to use each one.

What dateStyle and timeStyle are

The dateStyle option controls how dates appear. It affects which date components display and how detailed they are. The option accepts four values: "short", "medium", "long", and "full".

The timeStyle option controls how times appear. It affects which time components display and how detailed they are. The option accepts the same four values: "short", "medium", "long", and "full".

Both options provide shortcuts for setting multiple formatting options at once. When you specify a style, the formatter automatically selects appropriate values for components like weekday, month, day, year, hour, minute, second, and time zone name based on the locale.

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"

This single option replaces what would otherwise require setting multiple individual component options.

Understanding the four style levels

Each style level represents a different balance between brevity and detail. Short styles minimize space by omitting components and using numeric formats. Full styles maximize clarity by including all relevant components and spelling out words.

The "short" style produces compact output suitable for tight spaces. It typically uses numeric formats and omits supplementary information like weekday names.

The "medium" style provides moderate detail. It often includes abbreviated month names and balanced time precision.

The "long" style adds more context. It usually spells out month names fully and includes additional components like time zone information.

The "full" style produces the most complete representation. It includes all relevant components such as weekday names, full month names, and complete time zone names.

The exact components and formatting for each style vary by locale. American English might show months differently than German or Japanese, but the relative detail level remains consistent across locales.

Format dates with dateStyle

The dateStyle option controls date formatting. Each style level produces different output for the same date.

const date = new Date("2025-03-15T14:30:00");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "3/15/25"

console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"

console.log(longFormatter.format(date));
// Output: "March 15, 2025"

console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"

The short style uses all numeric values, making it the most compact. The medium style abbreviates the month name. The long style spells out the month fully. The full style adds the weekday name for complete context.

Format times with timeStyle

The timeStyle option controls time formatting. Each style level shows different time components.

const date = new Date("2025-03-15T14:30:45");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "2:30 PM"

console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"

console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"

console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"

The short style shows hours and minutes only. The medium style adds seconds. The long style includes the abbreviated time zone. The full style spells out the complete time zone name.

Combine dateStyle and timeStyle

You can use both options together to format complete timestamps. The formatter applies both styles independently.

const date = new Date("2025-03-15T14:30:45");

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "short"
});

console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"

The date appears with long formatting while the time uses short formatting. This combination provides detailed date context while keeping the time concise.

You can mix any date style with any time style based on your needs.

const date = new Date("2025-03-15T14:30:45");

const combinations = [
  { dateStyle: "short", timeStyle: "short" },
  { dateStyle: "medium", timeStyle: "medium" },
  { dateStyle: "long", timeStyle: "long" },
  { dateStyle: "full", timeStyle: "full" }
];

combinations.forEach(options => {
  const formatter = new Intl.DateTimeFormat("en-US", options);
  console.log(formatter.format(date));
});

// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

Using matching style levels produces consistent detail across both date and time. Mixing styles lets you emphasize one aspect over the other.

How date styles vary across locales

Each locale formats dates according to its own conventions. The same style produces different output for different locales, but the relative detail level stays consistent.

const date = new Date("2025-03-15T14:30:00");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "short"
  });

  const fullFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "full"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Full:  ${fullFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 3/15/25
//   Full:  Saturday, March 15, 2025
// de-DE:
//   Short: 15.03.25
//   Full:  Samstag, 15. März 2025
// fr-FR:
//   Short: 15/03/2025
//   Full:  samedi 15 mars 2025
// ja-JP:
//   Short: 2025/03/15
//   Full:  2025年3月15日土曜日

American English uses month/day/year order. German uses day.month.year with periods as separators. French uses day/month/year. Japanese uses year/month/day with kanji characters. The full style adds weekday names in each language with appropriate formatting.

How time styles vary across locales

Time formatting also adapts to locale conventions. Some locales use 12-hour clocks with AM/PM indicators, while others use 24-hour clocks.

const date = new Date("2025-03-15T14:30:45");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "short"
  });

  const longFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Long:  ${longFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 2:30 PM
//   Long:  2:30:45 PM PST
// de-DE:
//   Short: 14:30
//   Long:  14:30:45 PST
// fr-FR:
//   Short: 14:30
//   Long:  14:30:45 UTC−8
// ja-JP:
//   Short: 14:30
//   Long:  14:30:45 PST

American English uses 12-hour format with AM/PM. German, French, and Japanese use 24-hour format. The long style adds time zone information with formatting appropriate to each locale.

When to use short style

Short style works best when space is limited or when dates need to fit into compact layouts. Mobile interfaces, data tables, and compact displays benefit from minimal date formatting.

Use short date style for displaying dates in table columns, list items, or anywhere horizontal space is constrained. The numeric format takes fewer characters than spelled-out months or weekday names.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "short"
});

const events = [
  { name: "Team meeting", date: new Date("2025-03-15") },
  { name: "Project deadline", date: new Date("2025-03-28") },
  { name: "Conference", date: new Date("2025-04-05") }
];

events.forEach(event => {
  console.log(`${event.name}: ${formatter.format(event.date)}`);
});

Use short time style for displaying times in schedules, calendars, or anywhere precision to the second is unnecessary. Most contexts only need hours and minutes.

When to use medium style

Medium style balances detail and space. It provides more context than short style without the verbosity of long or full styles. This makes it suitable for most general-purpose date and time display.

Use medium date style when you have moderate space and want dates to be more readable than pure numeric formats. Abbreviated month names help users identify months more quickly than numbers.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium"
});

const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"

Use medium time style when you need seconds precision but want to keep time zones implicit. This works for displaying precise timestamps in application logs or activity feeds where users understand the time zone context.

When to use long style

Long style provides additional detail without becoming as verbose as full style. It spells out information fully while omitting supplementary components like weekday names.

Use long date style for important dates that deserve emphasis or when you want dates to read more naturally. Fully spelled month names are easier to scan than abbreviations.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long"
});

const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"

Use long time style when time zone information matters. This helps users understand when events occurred or will occur relative to their own time zone.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "long",
  timeZone: "America/New_York"
});

const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"

When to use full style

Full style produces the most complete date and time representation. It includes all relevant components, making it suitable for contexts where clarity and completeness matter more than space efficiency.

Use full date style for displaying dates that need maximum context. Adding the weekday helps users place dates within the weekly calendar, which is useful for scheduling, planning, and understanding temporal relationships.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full"
});

const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"

Use full time style when displaying times that need complete time zone context. Spelling out the full time zone name removes ambiguity for users in different regions.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full",
  timeStyle: "full"
});

const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

Full style works well for displaying singular important events, confirmation messages, or anywhere users benefit from seeing complete temporal context.

Understanding the restrictions

The dateStyle and timeStyle options cannot be used with individual component options. You must choose between using style presets or configuring components individually.

This will not work:

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // Error: cannot combine
});

The dateStyle option already determines weekday formatting. Adding an explicit weekday option creates a conflict. The same restriction applies to timeStyle with component options like hour, minute, or second.

If you need more control over specific components, omit the style options and configure components individually.

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

console.log(formatter.format(new Date("2025-03-15")));
// Output: "Saturday, March 15, 2025"

You can use dateStyle and timeStyle together because they control different aspects of formatting. You can also combine them with options that do not conflict, such as timeZone, calendar, or numberingSystem.

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "long",
  timeZone: "America/New_York"
});

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "March 15, 2025 at 2:30:45 PM EST"

Format dates for the user's locale

Use the browser's language preferences to format dates according to each user's expectations. The navigator.language property provides the user's preferred locale.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long",
  timeStyle: "short"
});

const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "March 15, 2025 at 2:30 PM"
// For de-DE: "15. März 2025 um 14:30"
// For fr-FR: "15 mars 2025 à 14:30"

You can also pass the entire navigator.languages array to enable fallback behavior. The formatter uses the first locale it supports from the array.

const formatter = new Intl.DateTimeFormat(navigator.languages, {
  dateStyle: "medium"
});

Reuse formatters for performance

Creating Intl.DateTimeFormat instances involves processing locale data and options. When formatting multiple dates with the same settings, create the formatter once and reuse it.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium",
  timeStyle: "short"
});

const events = [
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-16T10:00:00"),
  new Date("2025-03-17T16:45:00")
];

events.forEach(date => {
  console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"

This pattern improves performance when formatting arrays of dates or displaying many timestamps in a user interface.

What to remember

The dateStyle and timeStyle options provide preset formatting levels: "short", "medium", "long", and "full". Each level represents a different balance between brevity and detail, with short being most compact and full being most complete.

Use these presets instead of configuring individual date and time components manually. The presets produce appropriate output for every locale without requiring you to understand locale-specific formatting rules.

You can use dateStyle and timeStyle together but cannot combine them with individual component options like weekday or hour. Choose between preset styles for simplicity or individual components for fine-grained control.

Format dates using the user's locale from navigator.language to display dates according to each user's expectations. Reuse formatter instances when formatting multiple dates for better performance.