jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose Intl.DurationFormat Generator

Generieren Sie Intl.DurationFormat-Code fur lokalisierte Zeitdauerformatierung mit long/short/narrow/digital Stilen.

Tool wird geladen...

Was ist Intl.DurationFormat Generator?

Intl.DurationFormat is a built-in browser API that formats time durations according to locale conventions. Given a duration object with fields like hours, minutes, and seconds, it produces human-readable strings such as "1 hour, 30 minutes" (English long), "1 Std 30 Min." (German short), or "1:30:00" (digital). It supports four styles: long, short, narrow, and digital. Available in Chrome 104+ and part of Baseline 2025.

Kurze Antwort

Generate code using Intl.DurationFormat to display time durations in a locale-aware format. Choose between long, short, narrow, and digital styles. Supports English, German, French, Spanish, Japanese, and Dutch. Drop moment-duration-format and use the native API instead.

Einschränkungen

  • Intl.DurationFormat is not available in Safari as of mid-2026. Use a polyfill or fallback library for Safari users, or implement a simple manual formatter for basic cases.
  • The API does not aggregate units automatically — { hours: 1, minutes: 90 } formats as '1 hour, 90 minutes', not '2 hours, 30 minutes'. Normalize your duration before formatting if you want automatic unit conversion.
  • Each locale determines its own formatting rules and word choices. The digital style produces consistent numeric output, but long/short/narrow styles may vary in ways that affect layout width. Test across your target locales to avoid text overflow.

So nutzt du dieses Tool

  1. Create a duration object with the time components you want to format: { hours: 1, minutes: 30, seconds: 0 }.
  2. Construct a new Intl.DurationFormat instance with your chosen locale and optional style configuration.
  3. Call format(duration) on the instance to get the localized string, or call formatToParts(duration) for an array of formatted components.
  4. Experiment with different locales and styles in the tool to see how duration strings change across languages.

Wofür du es nutzen kannst

  • Display video length or podcast duration in a localized media player interface.
  • Show estimated reading time or processing time in a user's preferred language format.
  • Format server-side durations (API response times, job runtimes) for internationalized admin dashboards.

Anwendungsfalle

Praxisbeispiele

Beispiel

Localized video duration display

A streaming service shows video lengths in the viewer's locale. English viewers see '1 hour, 30 minutes', German viewers see '1 Std 30 Min.', and Japanese viewers see '1時間30分'. Using Intl.DurationFormat with the user's locale handles all three automatically.

Beispiel

Digital-style countdown display

An event countdown timer shows remaining time in digital format: '2:15:30' for 2 hours, 15 minutes, 30 seconds. Using style 'digital' with Intl.DurationFormat produces a consistent HH:MM:SS display across all locales.

Haufige Fehler

  • Passing a Date or timestamp to Intl.DurationFormat instead of a duration object — the API expects plain objects with numeric duration fields like { hours: 1, minutes: 30 }, not timestamps or dates.
  • Assuming all locales use the same word order or separator — Japanese places hours before minutes without a word separator while English uses commas. Always test your target locales rather than assuming English patterns.
  • Using style 'digital' with hours-only durations — a duration of { minutes: 45, seconds: 0 } in digital style may display as '00:45:00' with leading hours. Adjust the duration object to omit hours if you do not want them shown.

Überprüfung

  1. Open Chrome 104+ DevTools Console. Create new Intl.DurationFormat('en', { style: 'long' }). Call .format({ hours: 1, minutes: 30, seconds: 15 }) and verify it returns a string like '1 hour, 30 minutes, 15 seconds'.
  2. Create a second instance with locale 'de' and style 'short'. Format the same duration and verify the output uses German abbreviations like 'Std' and 'Min.' — confirming locale-aware behavior.

FAQ

Fragen zu Intl.DurationFormat Generator

What duration fields does Intl.DurationFormat accept?

Intl.DurationFormat accepts a duration object with fields: years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds, nanoseconds. Only include the fields you need — omitted fields are not displayed. The object can mix large and small units (e.g., hours and seconds without minutes).

How does the digital style differ from long, short, or narrow?

Digital style formats the duration as a numeric time display like '1:30:00' (HH:MM:SS), similar to a digital clock. Long style uses full words ('1 hour, 30 minutes'), short uses abbreviated forms ('1 hr, 30 min'), and narrow uses minimal notation ('1h 30m'). Each locale defines its own conventions for each style.

Does Intl.DurationFormat support fractional durations?

Duration values can be fractional or decimal numbers, but formatting behavior varies by locale and style. Fractional hours, for example, are formatted according to locale number conventions. For precise formatting, round your duration values to whole units before passing them to the API.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren