Vanta Logo
SPONSOR
Automate SOC 2 & ISO 27001 compliance with Vanta. Get $1,000 off.
Up to date
Published
3 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

Intl.DurationFormat: Format Time Durations with Locale Support

Stop writing manual duration formatting code. Instead, leverage the new powerful Intl.DateTimeFormat API for internationalized time displays

Time durations appear everywhere - video players showing remaining time, fitness apps tracking workout lengths, or project management tools measuring task completion time. Formatting these durations consistently across different locales has traditionally required custom code or external libraries.

The Intl.DurationFormat object solves this problem elegantly. It’s part of ECMAScript’s core language specification - specifically the ECMAScript Internationalization API (ECMA-402). This makes it a native JavaScript feature rather than a web browser API, though browser implementation determines its availability.

At its core, Intl.DurationFormat takes a duration object containing time units and formats it according to locale-specific rules. The basic usage is straightforward.

The duration object accepts multiple time units: years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds, and nanoseconds. This flexibility allows you to represent any time span from nanoseconds to centuries.

The locale parameter determines how the duration appears based on language and regional conventions. English might use “and” before the final unit, while French employs “et” - these nuances happen automatically:

The output style can be customized through the options parameter. Three primary styles exist: ‘long’, ‘short’, and ‘narrow’. Each provides progressively more compact representations:

To wrap up this article, here’s a final example with all the possible duration units. It demonstrates the full range of time units and how Intl.DurationFormat handles them.

If you found this article helpful, you might enjoy my free newsletter. I share developer tips and insights to help you grow your skills and career.


More Articles You Might Enjoy

If you enjoyed this article, you might find these related pieces interesting as well. If you like what I have to say, please check out the sponsors who are supporting me. Much appreciated!

Javascript
9 min read

Exploring JavaScript Symbols

Deep dive into JavaScript Symbols - what they are, why they matter, and how to use them effectively

Nov 15, 2024
Read article
Javascript
4 min read

JavaScript Import Attributes (ES2025)

Understanding the new import attributes syntax and why we can't rely on file extensions alone

Nov 10, 2024
Read article
Javascript
7 min read

JavaScript Sets and Maps: Beyond Arrays and Objects

How to handle unique values and key-value pairs properly without type coercion and performance issues

Nov 17, 2024
Read article
Javascript
3 min read

JavaScript's &&= Operator: Understanding Logical AND Assignment

Use the &&= operator to safely update truthy values while preserving falsy states

Nov 5, 2024
Read article
Javascript
4 min read

The Only Widely Recognized JavaScript Feature Ever Deprecated

The 'with' statement is the only feature ever deprecated in JavaScript

Aug 22, 2024
Read article
Javascript
3 min read

Float16Array in JavaScript

Understanding the new 16-bit floating point array in JavaScript

Apr 14, 2025
Read article
Javascript
4 min read

Embrace Intermediate Variables and Early Returns in JavaScript

Early returns and intermediate variables make your code easier to reason about

Aug 30, 2024
Read article
Javascript
4 min read

Understanding Bitwise Shifts in JavaScript: << and >>

A practical guide to left and right shift operators in JavaScript

Nov 12, 2024
Read article
Javascript
7 min read

JavaScript Operators: '||' vs '&&' vs '??'

Master JavaScript logical operators with practical examples and best practices

Oct 26, 2024
Read article

Become a better engineer

Here are engineering resources I've personally vetted and use. They focus on skills you'll actually need to build and scale real projects - the kind of experience that gets you hired or promoted.

Many companies have a fixed annual stipend per engineer (e.g. $2,000) for use towards learning resources. If your company offers this stipend, you can forward them your invoices directly for reimbursement. By using my affiliate links, you support my work and get a discount at the same!


This article was originally published on https://www.trevorlasn.com/blog/intl-durationformat-javascript-time-durations-with-locale-support. It was written by a human and polished using grammar tools for clarity.