How to display durations in short or long form
Use the style option to control whether durations appear as abbreviations, full words, or compact symbols
Introduction
When you display how long something takes, the format takes up different amounts of space. A workout duration of 1 hour and 30 minutes can appear as "1 hour and 30 minutes", "1 hr and 30 min", or "1h 30m" depending on how much space you have and how clear you need to be. Each format trades readability against horizontal space.
Different contexts require different formatting choices. A video player control bar showing duration benefits from compact text like "1h 30m". A workout summary screen explaining session length needs clear text like "1 hour and 30 minutes". A mobile dashboard showing multiple timer values uses the most compact form possible to fit information on screen.
JavaScript's Intl.DurationFormat provides the style option to control this choice. You can select between long display with spelled-out words, short display with standard abbreviations, or narrow display with the most compact representation possible. This option gives you precise control over how durations appear to users.
What the style option controls
The style option in Intl.DurationFormat accepts three values for text-based formatting: "long", "short", and "narrow". Each value produces a different level of verbosity for the duration output.
The long value spells out complete unit names like "1 hour and 30 minutes". The short value uses standard abbreviations like "1 hr and 30 min". The narrow value produces the most compact representation like "1h 30m", often removing spaces and using minimal symbols.
const duration = { hours: 1, minutes: 30 };
const longFormatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(longFormatter.format(duration));
// Output: "1 hour and 30 minutes"
const shortFormatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(shortFormatter.format(duration));
// Output: "1 hr and 30 min"
const narrowFormatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(narrowFormatter.format(duration));
// Output: "1h 30m"
The style option defaults to "short" if you omit it. This means duration formatting uses standard abbreviations unless you explicitly request a different display style.
Format durations with long style
Long style spells out complete unit names. This format provides maximum clarity at the cost of additional horizontal space.
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// Output: "2 hours and 30 minutes"
The formatter automatically handles singular and plural forms. One hour uses the singular "hour" while multiple hours use the plural "hours". You do not need to manually determine which form to use.
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(formatter.format({ hours: 1, minutes: 30 }));
// Output: "1 hour and 30 minutes"
console.log(formatter.format({ hours: 2, minutes: 1 }));
// Output: "2 hours and 1 minute"
Each unit type gets spelled out completely regardless of how many units appear in the duration.
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hours, 30 minutes and 45 seconds"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 minutes and 30 seconds"
console.log(formatter.format({ hours: 1, minutes: 0, seconds: 15 }));
// Output: "1 hour, 0 minutes and 15 seconds"
The formatter adds appropriate conjunctions between units. English uses commas and "and" to separate units. The conjunction appears before the final unit in the list.
Long style makes durations immediately clear without requiring users to interpret abbreviations. Users unfamiliar with time abbreviations find spelled-out units more accessible.
Format durations with short style
Short style uses standard abbreviations that most people recognize. This format balances readability with space efficiency.
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// Output: "2 hr and 30 min"
The formatter uses commonly recognized abbreviations. Hours become "hr", minutes become "min", and seconds become "sec". These abbreviations maintain readability while reducing character count.
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1 hr, 46 min and 40 sec"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 min and 30 sec"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3 hr and 15 min"
Short style is the default behavior. If you omit the style option, the formatter uses short style automatically.
const formatter = new Intl.DurationFormat("en-US");
console.log(formatter.format({ hours: 2, minutes: 30 }));
// Output: "2 hr and 30 min"
This default makes short style convenient when you want standard abbreviated durations without explicitly specifying the style option.
You can format different duration types with short style to see the standard abbreviations.
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2 days and 5 hr"
console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1 wk and 3 days"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1 hr, 30 min, 45 sec and 500 ms"
Each unit type uses its standard abbreviation. Days remain "days", weeks use "wk", and milliseconds use "ms". These abbreviations are widely recognized and work well in most contexts.
Format durations with narrow style
Narrow style produces the most compact representation possible. This format removes spaces and uses minimal symbols to save every character.
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// Output: "2h 30m"
The formatter uses single-letter abbreviations and minimal spacing. Hours become "h", minutes become "m", and seconds become "s". The output is significantly more compact than short or long style.
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1h 46m 40s"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5m 30s"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3h 15m"
Different units produce different narrow representations based on standard conventions.
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2d 5h"
console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1w 3d"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1h 30m 45s 500ms"
Narrow style works best when space is extremely limited and users are familiar with the time measurement context. The condensed format assumes users can interpret the units without explicit separation or explanation.
Compare long, short, and narrow styles
The differences between the three style options become clear when you format the same durations with each option.
const longFormatter = new Intl.DurationFormat("en-US", {
style: "long"
});
const shortFormatter = new Intl.DurationFormat("en-US", {
style: "short"
});
const narrowFormatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
const duration = { hours: 1, minutes: 30, seconds: 45 };
console.log("Long: " + longFormatter.format(duration));
console.log("Short: " + shortFormatter.format(duration));
console.log("Narrow: " + narrowFormatter.format(duration));
// Output:
// Long: 1 hour, 30 minutes and 45 seconds
// Short: 1 hr, 30 min and 45 sec
// Long: 1h 30m 45s
Long style uses complete words and explicit conjunctions. Short style uses standard abbreviations with conjunctions. Narrow style uses single letters with minimal spacing. This progression shows the tradeoff between clarity and space efficiency.
You can compare different durations to see how each style handles various time spans.
const durations = [
{ hours: 2, minutes: 15 },
{ minutes: 5, seconds: 30 },
{ hours: 1, minutes: 0, seconds: 10 },
{ days: 1, hours: 3, minutes: 45 }
];
durations.forEach(duration => {
const long = new Intl.DurationFormat("en-US", {
style: "long"
}).format(duration);
const short = new Intl.DurationFormat("en-US", {
style: "short"
}).format(duration);
const narrow = new Intl.DurationFormat("en-US", {
style: "narrow"
}).format(duration);
console.log("Duration:");
console.log(" Long: " + long);
console.log(" Short: " + short);
console.log(" Narrow: " + narrow);
console.log("");
});
// Output:
// Duration:
// Long: 2 hours and 15 minutes
// Short: 2 hr and 15 min
// Narrow: 2h 15m
//
// Duration:
// Long: 5 minutes and 30 seconds
// Short: 5 min and 30 sec
// Narrow: 5m 30s
//
// Duration:
// Long: 1 hour, 0 minutes and 10 seconds
// Short: 1 hr, 0 min and 10 sec
// Narrow: 1h 0m 10s
//
// Duration:
// Long: 1 day, 3 hours and 45 minutes
// Short: 1 day, 3 hr and 45 min
// Narrow: 1d 3h 45m
The character count difference becomes significant across multiple durations. In a table or list showing many durations, narrow style saves substantial horizontal space compared to long style.
How duration styles vary across languages
All three style options adapt to the locale you specify. Different languages use different abbreviations, unit names, conjunctions, and spacing conventions.
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
const duration = { hours: 2, minutes: 30 };
locales.forEach(locale => {
const longFormatter = new Intl.DurationFormat(locale, {
style: "long"
});
const shortFormatter = new Intl.DurationFormat(locale, {
style: "short"
});
console.log(locale + ":");
console.log(" Long: " + longFormatter.format(duration));
console.log(" Short: " + shortFormatter.format(duration));
});
// Output:
// en-US:
// Long: 2 hours and 30 minutes
// Short: 2 hr and 30 min
// de-DE:
// Long: 2 Stunden und 30 Minuten
// Short: 2 Std. und 30 Min.
// fr-FR:
// Long: 2 heures et 30 minutes
// Short: 2 h et 30 min
// ja-JP:
// Long: 2時間30分
// Short: 2 時間 30 分
Long style varies significantly across locales because each language has its own words for time units. German uses "Stunden" for hours, French uses "heures", and Japanese uses "時間". The formatter handles grammatical variations automatically.
Short style also adapts to locale conventions. German uses "Std." for hours, French uses "h", and Japanese adds spaces between numbers and unit characters. These locale-specific abbreviations reflect how each culture writes durations in abbreviated form.
The formatter handles conjunctions according to language rules. English uses "and", German uses "und", French uses "et", and Japanese omits conjunctions entirely. Each locale produces natural-looking output for its language.
const locales = ["en-US", "es-ES", "pt-BR"];
const duration = { hours: 1, minutes: 30, seconds: 45 };
locales.forEach(locale => {
const narrowFormatter = new Intl.DurationFormat(locale, {
style: "narrow"
});
console.log(locale + ": " + narrowFormatter.format(duration));
});
// Output:
// en-US: 1h 30m 45s
// es-ES: 1h 30min 45s
// pt-BR: 1h 30min 45s
Narrow style shows some variation across locales. English uses single letters like "h", "m", and "s". Spanish and Portuguese use "min" instead of just "m" for minutes. These differences reflect locale-specific conventions for compact time notation.
When to use long style
Long style works best when clarity and accessibility matter more than space efficiency. This choice makes durations immediately understandable without requiring interpretation.
Accessibility-focused interfaces benefit from long style because screen readers pronounce spelled-out words more naturally. A screen reader announcing "2 hours and 30 minutes" sounds more natural than "2 hr and 30 min", which might be read awkwardly or require special pronunciation rules.
Educational content benefits from long style because learners may not be familiar with time abbreviations. Teaching materials explaining durations should spell out units to avoid confusion.
Workout summaries and session reports use long style to maintain a clear, professional tone. A fitness app showing completed workout duration reads better with "1 hour and 15 minutes" than "1h 15m".
Formal reports and documentation use long style to maintain consistent writing standards. Business reports, medical records, and official documents typically spell out time durations rather than abbreviating them.
International audiences benefit from long style when users may be learning the language. Spelled-out unit names like "hours" and "minutes" are easier to understand than abbreviations for non-native speakers.
function formatWorkoutSummary(duration, locale) {
const formatter = new Intl.DurationFormat(locale, {
style: "long"
});
return formatter.format(duration);
}
const workout = { hours: 1, minutes: 15 };
console.log("Workout duration: " + formatWorkoutSummary(workout, "en-US"));
// Output: "Workout duration: 1 hour and 15 minutes"
Long style prioritizes understanding over brevity. Use it whenever users need to grasp the duration without any ambiguity or interpretation effort.
When to use short style
Short style works best in contexts where space matters but abbreviations are widely understood. This is the most common choice for general-purpose applications.
Mobile interfaces benefit from short style because screen width is limited. Dashboard cards showing multiple timers need compact durations to fit information on screen. Using "2 hr and 30 min" instead of "2 hours and 30 minutes" saves 11 characters per duration, adding up across multiple values.
Video player controls use short style to show duration without cluttering the interface. Displaying "1 hr and 46 min" in the control bar is more compact than "1 hour and 46 minutes" while remaining clear.
Data tables displaying durations in columns need consistent width. Short abbreviations like "hr", "min", and "sec" keep column widths manageable. Long units like "hours", "minutes", and "seconds" widen columns unnecessarily.
Timer applications use short style because users checking timers are familiar with time abbreviations. A countdown timer showing "5 min and 30 sec" balances clarity with efficient use of display space.
Flight booking interfaces use short style to show travel duration. Displaying "8 hr and 15 min" in a flight search result is clearer than "8h 15m" but more compact than "8 hours and 15 minutes".
function formatFlightDuration(duration, locale) {
const formatter = new Intl.DurationFormat(locale, {
style: "short"
});
return formatter.format(duration);
}
const flight = { hours: 8, minutes: 15 };
console.log(formatFlightDuration(flight, "en-US"));
// Output: "8 hr and 15 min"
Short style strikes a balance between clarity and efficiency. Most users recognize standard abbreviations like hr, min, and sec without confusion.
When to use narrow style
Narrow style works best in extremely space-constrained contexts where every character matters and users are highly familiar with time notation.
Compact widgets showing single metrics can use narrow style when the display size is minimal. A timer widget showing "5m 30s" in large text fits better than "5 minutes and 30 seconds".
Data visualizations with dense information benefit from narrow style. Chart labels, graph annotations, and data overlays need minimal text to avoid obscuring underlying visual content. Using "2h 30m" instead of "2 hr and 30 min" saves characters while remaining readable to users who understand the context.
Mobile home screen widgets with limited space use narrow style to maximize information density. A workout tracking widget showing multiple recent sessions in a small tile benefits from compact duration notation.
Smartwatch interfaces use narrow style because screen space is extremely limited. Displaying "1h 15m" on a small circular screen works better than longer formats.
List views showing many items with durations can use narrow style to keep each row compact. A music playlist showing track durations, a video list showing runtime, or an exercise list showing duration per exercise all benefit from minimal formatting.
function formatVideoPlaylist(videos, locale) {
const formatter = new Intl.DurationFormat(locale, {
style: "narrow"
});
return videos.map(video => ({
title: video.title,
duration: formatter.format(video.duration)
}));
}
const playlist = [
{ title: "Introduction", duration: { minutes: 2, seconds: 30 } },
{ title: "Getting Started", duration: { minutes: 5, seconds: 15 } },
{ title: "Advanced Topics", duration: { hours: 1, minutes: 10 } }
];
console.log(formatVideoPlaylist(playlist, "en-US"));
// Output:
// [
// { title: "Introduction", duration: "2m 30s" },
// { title: "Getting Started", duration: "5m 15s" },
// { title: "Advanced Topics", duration: "1h 10m" }
// ]
Narrow style assumes users are familiar with time notation and can interpret units without assistance. This option trades clarity for maximum space efficiency.
Combine style with other formatting options
The style option works with all other duration formatting options. You can control which units appear while choosing the display style.
const formatter = new Intl.DurationFormat("en-US", {
style: "long",
hours: "numeric",
minutes: "2-digit",
seconds: "2-digit"
});
console.log(formatter.format({ hours: 1, minutes: 5, seconds: 3 }));
// Output: "1:05:03"
This combination shows hours with the long style but uses numeric formatting with zero-padding for minutes and seconds. The result is a hybrid format mixing text and numbers.
You can format only specific units while using a consistent style.
const formatter = new Intl.DurationFormat("en-US", {
style: "short",
hours: "numeric",
minutes: "numeric"
});
console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hr and 30 min"
The formatter shows only hours and minutes even though the duration object includes seconds. This gives you control over which units appear in the output.
You can create custom formats by mixing different unit styles.
const formatter = new Intl.DurationFormat("en-US", {
hours: "long",
minutes: "short",
seconds: "narrow"
});
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45 }));
// Output: "1 hour, 30 min, 45s"
This produces a mixed format where each unit uses a different verbosity level. While unusual, this flexibility lets you create specialized formats when needed.
What to remember
The style option controls how durations appear when formatting with Intl.DurationFormat. Set it to "long" for spelled-out units like "2 hours and 30 minutes", "short" for standard abbreviations like "2 hr and 30 min", or "narrow" for compact forms like "2h 30m". The option defaults to "short" if omitted.
Use long style when clarity and accessibility matter more than space, or when users may be unfamiliar with time abbreviations. Use short style for general-purpose applications where space matters and users understand standard abbreviations. Use narrow style only in extremely space-constrained contexts where users are highly familiar with time notation.
The formatter handles locale-specific variations automatically, including different unit names, abbreviations, conjunctions, spacing conventions, and plural forms. Combine style with other formatting options to control which units appear and how they display.