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

Introduction

Formatting times requires choosing which components to display. You might show hours and minutes for a meeting time, add seconds for a precise timestamp, or include timezone information for coordinating across regions. 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 numeric hours, numeric minutes, and numeric seconds, you can request timeStyle: "medium". Instead of configuring hour and minute display separately, you can request timeStyle: "short".

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 timeStyle is

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

The option provides a shortcut for setting multiple formatting options at once. When you specify a style, the formatter automatically selects appropriate values for components like hour, minute, second, and time zone name based on the locale.

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

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

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 showing only essential components. Full styles maximize clarity by including all relevant components like timezone names.

The "short" style produces compact output showing hours and minutes. It omits seconds and timezone information, making it suitable for most everyday time display needs.

The "medium" style adds seconds to provide more precision. It still omits timezone information but gives exact timing down to the second.

The "long" style adds abbreviated timezone information. It includes hours, minutes, seconds, and a short timezone code like PST or GMT.

The "full" style produces the most complete representation. It includes all time components with the timezone spelled out completely, like Pacific Standard Time.

The exact components and formatting for each style vary by locale. American English typically uses 12-hour format with AM/PM, while German uses 24-hour format. The relative detail level remains consistent across locales.

Format times with timeStyle

The timeStyle option controls time formatting. Each style level produces different output for the same time.

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, making it the most compact. The medium style adds seconds for precision. The long style includes an abbreviated timezone code. The full style spells out the complete timezone name for maximum clarity.

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 time styles vary across locales

Each locale formats times 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: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 timezone information with formatting appropriate to each locale.

These differences reflect each culture's conventions for displaying time. The API handles these variations automatically based on the locale identifier.

When to use short style

Short style works best for most everyday time display. It shows the information users typically need without cluttering the interface with seconds or timezone details.

Use short time style for displaying meeting times, appointment scheduling, or any context where second-level precision is unnecessary. Most users think in terms of hours and minutes rather than exact seconds.

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

const meetings = [
  { title: "Team standup", time: new Date("2025-03-15T09:00:00") },
  { title: "Client call", time: new Date("2025-03-15T14:30:00") },
  { title: "Code review", time: new Date("2025-03-15T16:45:00") }
];

meetings.forEach(meeting => {
  console.log(`${meeting.title}: ${formatter.format(meeting.time)}`);
});

// Output:
// Team standup: 9:00 AM
// Client call: 2:30 PM
// Code review: 4:45 PM

Calendar applications, scheduling interfaces, and time pickers benefit from short style. The compact format keeps interfaces clean while providing all the information users need to understand when events occur.

Short style assumes users understand the timezone context. When all users operate in the same timezone or when the application handles timezone conversion transparently, explicit timezone display becomes redundant.

When to use medium style

Medium style provides second-level precision while keeping timezone information implicit. This makes it suitable for contexts where exact timing matters but timezone is understood from context.

Use medium time style when displaying precise timestamps in application logs, activity feeds, or audit trails. These contexts benefit from knowing exactly when actions occurred down to the second.

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

const activities = [
  { action: "User logged in", time: new Date("2025-03-15T09:15:23") },
  { action: "File uploaded", time: new Date("2025-03-15T09:18:47") },
  { action: "Settings updated", time: new Date("2025-03-15T09:22:11") }
];

activities.forEach(activity => {
  console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});

// Output:
// User logged in: 9:15:23 AM
// File uploaded: 9:18:47 AM
// Settings updated: 9:22:11 AM

Developer tools, debugging interfaces, and performance monitoring dashboards use medium style to show precise timing information. The second precision helps identify patterns, measure durations, and correlate events.

Medium style works well when you need more detail than short style provides but do not need the verbosity of timezone information. Most users can infer timezone from application context.

When to use long style

Long style adds abbreviated timezone information to the time display. This helps users understand when events occurred or will occur relative to their own timezone.

Use long time style when coordinating across timezones or when displaying times that might be interpreted differently depending on the viewer's location. The abbreviated timezone code provides context without taking excessive space.

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

const events = [
  { name: "Webinar starts", time: new Date("2025-03-15T14:00:00") },
  { name: "Registration closes", time: new Date("2025-03-15T13:30:00") }
];

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

// Output:
// Webinar starts: 2:00:00 PM EST
// Registration closes: 1:30:00 PM EST

International applications, scheduling tools for distributed teams, and event coordination platforms benefit from long style. The timezone code removes ambiguity about which timezone the time represents.

Flight booking systems, conference scheduling applications, and remote work tools use long style to help users understand time in different timezones. The format balances clarity with space efficiency.

When to use full style

Full style produces the most complete time representation. It spells out the complete timezone name, removing all ambiguity about which timezone the time represents.

Use full time style when displaying times that need maximum clarity. Spelling out the full timezone name helps users in different regions understand exactly when an event occurs.

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. International meeting invitations, event confirmations, and formal scheduling communications benefit from this level of detail.

Time-sensitive legal documents, official records, and compliance-related timestamps use full style to establish unambiguous timing information. The complete timezone name prevents any confusion about when events occurred.

Understanding the restrictions

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

This will not work:

const formatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium",
  hour: "2-digit"  // Error: cannot combine
});

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

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

const formatter = new Intl.DateTimeFormat("en-US", {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
});

console.log(formatter.format(new Date("2025-03-15T14:30:45")));
// Output: "02:30:45 PM"

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 times for the user's locale

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

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

const time = new Date("2025-03-15T14:30:00");
console.log(formatter.format(time));
// Output varies by user's locale
// For en-US: "2:30 PM"
// For de-DE: "14:30"
// For fr-FR: "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, {
  timeStyle: "medium"
});

Reuse formatters for performance

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

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

const times = [
  new Date("2025-03-15T09:00:00"),
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-15T16:45:00")
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// Output:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"

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

What to remember

The timeStyle option provides preset formatting levels: "short", "medium", "long", and "full". Each level represents a different balance between brevity and detail. Short shows hours and minutes, medium adds seconds, long adds abbreviated timezone, and full includes complete timezone names.

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

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

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