So formatieren Sie Zeiten als kurz, mittel, lang oder vollständig

Einführung

Die Formatierung von Zeiten erfordert die Auswahl der anzuzeigenden Komponenten. Sie können Stunden und Minuten für eine Besprechungszeit anzeigen, Sekunden für einen präzisen Zeitstempel hinzufügen oder Zeitzoneninformationen für die Koordination über Regionen hinweg einbeziehen. Jede Komponente verfügt über eigene Formatierungsoptionen. Die individuelle Konfiguration all dieser Optionen führt zu ausführlichem Code und erfordert das Verständnis, welche Kombinationen gut zusammenpassen.

JavaScripts Intl.DateTimeFormat bietet vordefinierte Stile, die gängige Formatierungsoptionen in einfache Optionen bündeln. Anstatt anzugeben, dass Sie numerische Stunden, numerische Minuten und numerische Sekunden möchten, können Sie timeStyle: "medium" anfordern. Anstatt die Anzeige von Stunden und Minuten separat zu konfigurieren, können Sie timeStyle: "short" anfordern.

Diese Voreinstellungen funktionieren in allen Locales. Derselbe Stil erzeugt eine angemessene Ausgabe, unabhängig davon, ob Sie für US-Englisch, Deutsch, Japanisch oder Arabisch formatieren. Diese Lektion erklärt, was jede Stilebene bietet und wann jede einzelne verwendet werden sollte.

Was timeStyle ist

Die Option timeStyle steuert, wie Zeiten angezeigt werden. Sie beeinflusst, welche Zeitkomponenten angezeigt werden und wie detailliert sie sind. Die Option akzeptiert vier Werte: "short", "medium", "long" und "full".

Die Option bietet eine Abkürzung zum gleichzeitigen Festlegen mehrerer Formatierungsoptionen. Wenn Sie einen Stil angeben, wählt der Formatter automatisch geeignete Werte für Komponenten wie Stunde, Minute, Sekunde und Zeitzonenname basierend auf dem Locale aus.

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

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

Diese einzelne Option ersetzt das, was andernfalls das Festlegen mehrerer individueller Komponentenoptionen erfordern würde.

Die vier Stilebenen verstehen

Jede Stilebene stellt ein anderes Gleichgewicht zwischen Kürze und Detailgrad dar. Kurze Stile minimieren den Platz, indem sie nur wesentliche Komponenten anzeigen. Vollständige Stile maximieren die Klarheit, indem sie alle relevanten Komponenten wie Zeitzonennamen einbeziehen.

Der "short"-Stil erzeugt eine kompakte Ausgabe, die Stunden und Minuten anzeigt. Er lässt Sekunden und Zeitzoneninformationen weg und eignet sich daher für die meisten alltäglichen Zeitanzeigeanforderungen.

Der "medium"-Stil fügt Sekunden hinzu, um mehr Präzision zu bieten. Er lässt weiterhin Zeitzoneninformationen weg, gibt aber die genaue Zeit bis auf die Sekunde an.

Der "long"-Stil fügt abgekürzte Zeitzoneninformationen hinzu. Er enthält Stunden, Minuten, Sekunden und einen kurzen Zeitzonencode wie PST oder GMT.

Der "full"-Stil erzeugt die vollständigste Darstellung. Er enthält alle Zeitkomponenten mit vollständig ausgeschriebener Zeitzone, wie Pacific Standard Time.

Die genauen Komponenten und die Formatierung für jeden Stil variieren je nach Gebietsschema. Amerikanisches Englisch verwendet typischerweise das 12-Stunden-Format mit AM/PM, während Deutsch das 24-Stunden-Format verwendet. Der relative Detailgrad bleibt über alle Gebietsschemata hinweg konsistent.

Zeiten mit timeStyle formatieren

Die timeStyle-Option steuert die Zeitformatierung. Jede Stilebene erzeugt eine andere Ausgabe für dieselbe Zeit.

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"

Der kurze Stil zeigt nur Stunden und Minuten an und ist damit am kompaktesten. Der mittlere Stil fügt Sekunden für Präzision hinzu. Der lange Stil enthält einen abgekürzten Zeitzonencode. Der vollständige Stil schreibt den kompletten Zeitzonennamen aus, um maximale Klarheit zu gewährleisten.

dateStyle und timeStyle kombinieren

Sie können beide Optionen zusammen verwenden, um vollständige Zeitstempel zu formatieren. Der Formatierer wendet beide Stile unabhängig voneinander an.

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"

Das Datum wird mit langer Formatierung angezeigt, während die Uhrzeit eine kurze Formatierung verwendet. Diese Kombination bietet detaillierten Datumskontext bei gleichzeitig kompakter Zeitangabe.

Sie können jeden Datumsstil mit jedem Zeitstil kombinieren, je nach Ihren Anforderungen.

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"

Die Verwendung übereinstimmender Stilebenen erzeugt konsistente Detailtiefe für Datum und Uhrzeit. Das Mischen von Stilen ermöglicht es Ihnen, einen Aspekt gegenüber dem anderen zu betonen.

Wie Zeitstile sich über Lokalisierungen hinweg unterscheiden

Jede Lokalisierung formatiert Zeiten gemäß ihren eigenen Konventionen. Derselbe Stil erzeugt unterschiedliche Ausgaben für verschiedene Lokalisierungen, aber die relative Detailtiefe bleibt konsistent.

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

Amerikanisches Englisch verwendet das 12-Stunden-Format mit AM/PM. Deutsch, Französisch und Japanisch verwenden das 24-Stunden-Format. Der lange Stil fügt Zeitzoneninformationen mit für jede Lokalisierung angemessener Formatierung hinzu.

Diese Unterschiede spiegeln die Konventionen jeder Kultur für die Zeitanzeige wider. Die API behandelt diese Variationen automatisch basierend auf der Lokalisierungskennung.

Wann der kurze Stil zu verwenden ist

Der kurze Stil eignet sich am besten für die meisten alltäglichen Zeitanzeigen. Er zeigt die Informationen, die Benutzer typischerweise benötigen, ohne die Benutzeroberfläche mit Sekunden oder Zeitzonendetails zu überladen.

Verwenden Sie den kurzen Zeitstil für die Anzeige von Besprechungszeiten, Terminplanung oder jeden Kontext, in dem Sekundengenauigkeit unnötig ist. Die meisten Benutzer denken in Stunden und Minuten statt in exakten Sekunden.

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

Kalenderanwendungen, Planungsschnittstellen und Zeitauswahlen profitieren vom kurzen Stil. Das kompakte Format hält Benutzeroberflächen übersichtlich und bietet gleichzeitig alle Informationen, die Benutzer benötigen, um zu verstehen, wann Ereignisse stattfinden.

Der kurze Stil setzt voraus, dass Benutzer den Zeitzonenkontext verstehen. Wenn alle Benutzer in derselben Zeitzone arbeiten oder wenn die Anwendung die Zeitzonenkonvertierung transparent handhabt, wird die explizite Zeitzonenanzeige redundant.

Wann der mittlere Stil verwendet werden sollte

Der mittlere Stil bietet Präzision auf zweiter Ebene, während die Zeitzoneninformationen implizit bleiben. Dies macht ihn für Kontexte geeignet, in denen genaues Timing wichtig ist, die Zeitzone jedoch aus dem Kontext verstanden wird.

Verwenden Sie den mittleren Zeitstil, wenn Sie präzise Zeitstempel in Anwendungsprotokollen, Aktivitätsfeeds oder Audit-Trails anzeigen. Diese Kontexte profitieren davon, genau zu wissen, wann Aktionen bis auf die Sekunde genau stattgefunden haben.

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

Entwicklertools, Debugging-Schnittstellen und Performance-Monitoring-Dashboards verwenden den mittleren Stil, um präzise Timing-Informationen anzuzeigen. Die Sekundenpräzision hilft dabei, Muster zu erkennen, Dauern zu messen und Ereignisse zu korrelieren.

Der mittlere Stil funktioniert gut, wenn Sie mehr Details benötigen, als der kurze Stil bietet, aber nicht die Ausführlichkeit von Zeitzoneninformationen benötigen. Die meisten Benutzer können die Zeitzone aus dem Anwendungskontext ableiten.

Wann der lange Stil verwendet werden sollte

Der lange Stil fügt abgekürzte Zeitzoneninformationen zur Zeitanzeige hinzu. Dies hilft Benutzern zu verstehen, wann Ereignisse relativ zu ihrer eigenen Zeitzone stattgefunden haben oder stattfinden werden.

Verwenden Sie den langen Zeitstil, wenn Sie über Zeitzonen hinweg koordinieren oder wenn Sie Zeiten anzeigen, die je nach Standort des Betrachters unterschiedlich interpretiert werden könnten. Der abgekürzte Zeitzonencode bietet Kontext, ohne übermäßig viel Platz einzunehmen.

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

Internationale Anwendungen, Planungstools für verteilte Teams und Plattformen zur Ereigniskoordination profitieren vom langen Stil. Der Zeitzonencode beseitigt Mehrdeutigkeiten darüber, welche Zeitzone die Zeit repräsentiert.

Flugbuchungssysteme, Konferenzplanungsanwendungen und Remote-Work-Tools verwenden den langen Stil, um Benutzern zu helfen, die Zeit in verschiedenen Zeitzonen zu verstehen. Das Format balanciert Klarheit mit Platzeffizienz.

Wann der vollständige Stil verwendet werden sollte

Der vollständige Stil erzeugt die vollständigste Zeitdarstellung. Er schreibt den vollständigen Zeitzonennamen aus und beseitigt jegliche Mehrdeutigkeit darüber, welche Zeitzone die Zeit repräsentiert.

Verwenden Sie den vollständigen Zeitstil, wenn Sie Zeiten anzeigen, die maximale Klarheit erfordern. Das Ausschreiben des vollständigen Zeitzonennamens hilft Benutzern in verschiedenen Regionen, genau zu verstehen, wann ein Ereignis stattfindet.

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"

Der vollständige Stil eignet sich gut für die Anzeige einzelner wichtiger Ereignisse, Bestätigungsnachrichten oder überall dort, wo Benutzer davon profitieren, den vollständigen zeitlichen Kontext zu sehen. Internationale Besprechungseinladungen, Ereignisbestätigungen und formelle Terminabsprachen profitieren von diesem Detailgrad.

Zeitkritische Rechtsdokumente, offizielle Aufzeichnungen und compliance-bezogene Zeitstempel verwenden den vollständigen Stil, um eindeutige Zeitinformationen zu etablieren. Der vollständige Zeitzonenname verhindert jegliche Verwirrung darüber, wann Ereignisse stattgefunden haben.

Die Einschränkungen verstehen

Die Option timeStyle kann nicht mit individuellen Zeitkomponentenoptionen verwendet werden. Sie müssen zwischen der Verwendung von Stil-Presets oder der individuellen Konfiguration von Komponenten wählen.

Dies funktioniert nicht:

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

Die Option timeStyle bestimmt bereits die Stundenformatierung. Das Hinzufügen einer expliziten Option hour erzeugt einen Konflikt. Die gleiche Einschränkung gilt für andere Komponentenoptionen wie minute, second oder timeZoneName.

Wenn Sie mehr Kontrolle über bestimmte Komponenten benötigen, lassen Sie die Stiloptionen weg und konfigurieren Sie die Komponenten individuell.

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"

Sie können dateStyle und timeStyle zusammen verwenden, da sie verschiedene Aspekte der Formatierung steuern. Sie können sie auch mit Optionen kombinieren, die nicht in Konflikt stehen, wie timeZone, calendar oder 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"

Zeiten für das Gebietsschema des Benutzers formatieren

Verwenden Sie die Spracheinstellungen des Browsers, um Zeiten entsprechend den Erwartungen jedes Benutzers zu formatieren. Die Eigenschaft navigator.language stellt das bevorzugte Gebietsschema des Benutzers bereit.

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"

Sie können auch das gesamte navigator.languages-Array übergeben, um Fallback-Verhalten zu aktivieren. Der Formatter verwendet das erste Locale aus dem Array, das er unterstützt.

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

Formatter für bessere Performance wiederverwenden

Das Erstellen von Intl.DateTimeFormat-Instanzen erfordert die Verarbeitung von Locale-Daten und Optionen. Wenn Sie mehrfach mit denselben Einstellungen formatieren, erstellen Sie den Formatter einmal und verwenden Sie ihn wieder.

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"

Dieses Muster verbessert die Performance beim Formatieren von Zeit-Arrays oder beim Anzeigen vieler Zeitstempel in einer Benutzeroberfläche.

Was Sie sich merken sollten

Die timeStyle-Option bietet vordefinierte Formatierungsstufen: "short", "medium", "long" und "full". Jede Stufe repräsentiert eine andere Balance zwischen Kürze und Detailgrad. Short zeigt Stunden und Minuten, medium fügt Sekunden hinzu, long fügt abgekürzte Zeitzonen hinzu und full enthält vollständige Zeitzonennamen.

Verwenden Sie diese Presets anstatt einzelne Zeitkomponenten manuell zu konfigurieren. Die Presets erzeugen für jedes Locale eine angemessene Ausgabe, ohne dass Sie locale-spezifische Formatierungsregeln verstehen müssen.

Sie können timeStyle mit dateStyle verwenden, aber nicht mit einzelnen Komponentenoptionen wie hour oder minute kombinieren. Wählen Sie zwischen Preset-Stilen für Einfachheit oder einzelnen Komponenten für feinkörnige Kontrolle.

Formatieren Sie Zeiten mit dem Locale des Benutzers aus navigator.language, um Zeiten entsprechend den Erwartungen jedes Benutzers anzuzeigen. Verwenden Sie Formatter-Instanzen beim Formatieren mehrerer Zeiten wieder, um eine bessere Performance zu erzielen.