Menschenlesbare Zeitangaben im Browser anzeigen

Ihr Server speichert Zeitstempel in UTC. Ihre Benutzer leben in Dutzenden von Zeitzonen. Die Lücke zwischen diesen beiden Realitäten – rohe ISO-Strings versus „vor 2 Stunden” – bestimmt, ob Ihre Benutzeroberfläche nativ oder fremd wirkt.

Moderne Browser können jetzt menschenlesbare Zeitangaben in JavaScript ohne Drittanbieter-Bibliotheken verarbeiten. Dieser Artikel behandelt die nativen APIs, die Sie verwenden sollten: Intl.DateTimeFormat, Intl.RelativeTimeFormat, Intl.DurationFormat und die Temporal API für zeitzonenbewusste Logik.

Absolute Zeitstempel mit Intl.DateTimeFormat

Wenn Benutzer exakte Daten und Uhrzeiten benötigen, übernimmt Intl.DateTimeFormat die Lokalisierung automatisch. Es respektiert die Locale des Benutzers und formatiert Daten entsprechend regionaler Konventionen.

const date = new Date('2026-03-15T14:30:00Z')

const formatter = new Intl.DateTimeFormat('en-US', {
  dateStyle: 'medium',
  timeStyle: 'short',
  timeZone: 'America/New_York'
})

console.log(formatter.format(date)) // "Mar 15, 2026, 10:30 AM"

Die API akzeptiert IANA-Zeitzonen-Identifikatoren direkt und eliminiert manuelle Offset-Berechnungen. Für benutzerlokale Formatierung erkennen Sie die Zeitzone automatisch:

const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone

Dies gibt Werte wie "Europe/London" oder "Asia/Tokyo" zurück, die Sie direkt an Formatierer übergeben können.

Relative Zeitangaben mit Intl.RelativeTimeFormat

Social Feeds, Benachrichtigungen und Aktivitätsprotokolle profitieren von relativen Zeitstempeln. Intl.RelativeTimeFormat erzeugt Formulierungen wie „vor 3 Tagen” oder „in 2 Stunden” mit korrekter Lokalisierung.

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })

rtf.format(-1, 'day')    // "yesterday"
rtf.format(-3, 'hour')   // "3 hours ago"
rtf.format(2, 'week')    // "in 2 weeks"

Die Option numeric: 'auto' erzeugt natürliche Sprache („yesterday”) anstelle von wörtlichen Zahlen („1 day ago”), wenn dies angemessen ist.

Sie müssen die Differenz selbst berechnen – die API formatiert Werte, nicht Daten. Eine einfache Hilfsfunktion funktioniert:

function getRelativeTime(date) {
  const now = Date.now()
  const diffInSeconds = Math.round((date - now) / 1000)
  const units = [
    { unit: 'year', seconds: 31536000 },
    { unit: 'month', seconds: 2592000 },
    { unit: 'day', seconds: 86400 },
    { unit: 'hour', seconds: 3600 },
    { unit: 'minute', seconds: 60 },
    { unit: 'second', seconds: 1 }
  ]

  for (const { unit, seconds } of units) {
    if (Math.abs(diffInSeconds) >= seconds) {
      const value = Math.round(diffInSeconds / seconds)
      return new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
        .format(value, unit)
    }
  }
  return 'just now'
}

Die obigen Monats- und Jahreswerte verwenden feste Sekundenapproximationen. Für kalenderexakte Differenzen über variierende Monatslängen oder Schaltjahre hinweg verwenden Sie stattdessen Temporal oder eine dedizierte Datumsbibliothek anstelle fester Sekundenkonstanten.

Beachten Sie, dass Math.round gelegentlich einen Wert in die nächste Einheit verschieben kann (zum Beispiel werden 89 Sekunden auf 1 gerundet, wenn sie durch 60 geteilt werden, was „1 minute ago” anstelle von „89 seconds ago” erzeugt). Wenn Sie strengere Grenzen benötigen, verwenden Sie stattdessen Math.trunc.

Dauerformatierung mit Intl.DurationFormat

Für verstrichene Zeit, Countdowns oder Videolängen bietet Intl.DurationFormat konsistente Ausgaben über Locales hinweg:

const duration = { hours: 2, minutes: 45, seconds: 30 }

const df = new Intl.DurationFormat('en', { style: 'long' })
console.log(df.format(duration)) // "2 hours, 45 minutes, 30 seconds"

const dfShort = new Intl.DurationFormat('en', { style: 'digital' })
console.log(dfShort.format(duration)) // "2:45:30"

Diese API erreichte 2025 browserübergreifende Baseline-Unterstützung und ist in modernen Browsern verfügbar, obwohl Sie die Kompatibilität mit Ihrer spezifischen Support-Matrix dennoch bestätigen sollten.

Die Temporal API für sicherere Datumsverarbeitung

Die Temporal API adressiert langjährige Probleme mit JavaScripts Date-Objekt – Veränderbarkeit, Zeitzonenverwirrung und Parsing-Inkonsistenzen. Temporal wird ab 2026 in modernen Chromium- und Firefox-Versionen unterstützt, aber Feature Detection bleibt essenziell, da die Unterstützung noch nicht universell über alle Browser hinweg vorhanden ist.

if (typeof Temporal !== 'undefined') {
  const now = Temporal.Now.zonedDateTimeISO('America/Los_Angeles')
  console.log(now.toString())
}

Temporal bietet unterschiedliche Typen für verschiedene Konzepte: Temporal.PlainDate für Kalenderdaten, Temporal.PlainTime für Wanduhrzeit und Temporal.ZonedDateTime für zeitzonenbewusste Momente. Diese Explizitheit verhindert die Fehler, die Date-basierten Code plagen.

Für neue Projekte bietet Temporal die sauberste Grundlage. Für bestehende Codebasen funktionieren die Intl-Formatierer nahtlos mit Legacy-Date-Objekten.

Praktische Empfehlungen

Speichern Sie Zeitstempel als UTC-ISO-8601-Strings. Formatieren Sie sie clientseitig mit den Intl-APIs. Vermeiden Sie das Parsen von Nicht-ISO-Datumsstrings – sie verhalten sich inkonsistent über Browser hinweg.

Verwenden Sie Formatierer-Instanzen wieder, wenn Sie mehrere Zeitstempel formatieren. Einen Formatierer einmal zu erstellen und format() wiederholt aufzurufen ist deutlich schneller, als bei jedem Aufruf einen neuen zu erstellen.

Verwenden Sie semantisches HTML für Barrierefreiheit:

<time datetime="2026-03-15T14:30:00Z">March 15, 2026</time>

Fazit

Die native Plattform übernimmt jetzt, was früher Moment.js oder ähnliche Bibliotheken erforderte. Intl.DateTimeFormat deckt absolute Zeitstempel ab, Intl.RelativeTimeFormat deckt relative Formulierungen ab, Intl.DurationFormat deckt verstrichene Zeit ab, und die Temporal API bietet eine solide Grundlage für zeitzonenbewusste Datumslogik. Für menschenlesbare Zeitangaben im Browser sind diese eingebauten Werkzeuge alles, was Sie brauchen.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.