Wie man Uhrzeiten als kurz, mittel, lang oder vollständig formatiert

Einführung

Die Formatierung von Uhrzeiten erfordert die Auswahl der anzuzeigenden Komponenten. Sie könnten 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 hat ihre eigenen Formatierungsoptionen. Die individuelle Konfiguration all dieser Optionen erzeugt umfangreichen Code und erfordert ein Verständnis dafür, welche Kombinationen gut zusammenarbeiten.

JavaScripts Intl.DateTimeFormat bietet vordefinierte Stile, die gängige Formatierungsoptionen in einfachen Optionen bündeln. Anstatt anzugeben, dass Sie numerische Stunden, numerische Minuten und numerische Sekunden wünschen, 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. Der gleiche Stil erzeugt angemessene Ausgaben, unabhängig davon, ob für amerikanisches Englisch, Deutsch, Japanisch oder Arabisch formatiert wird. Diese Lektion erklärt, was jede Stilebene bietet und wann jede verwendet werden sollte.

Was timeStyle ist

Die Option timeStyle steuert, wie Uhrzeiten erscheinen. 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 für die gleichzeitige Einstellung mehrerer Formatierungsoptionen. Wenn Sie einen Stil angeben, wählt der Formatierer 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, was sonst die Einstellung mehrerer individueller Komponentenoptionen erfordern würde.

Die vier Stilebenen verstehen

Jede Stilebene repräsentiert ein unterschiedliches Gleichgewicht zwischen Kürze und Detail. 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 Stil "short" erzeugt eine kompakte Ausgabe, die Stunden und Minuten anzeigt. Er lässt Sekunden und Zeitzoneninformationen weg, was ihn für die meisten alltäglichen Zeitanzeigebedürfnisse geeignet macht.

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

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

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

Die genauen Komponenten und Formatierungen für jeden Stil variieren je nach Locale. Amerikanisches Englisch verwendet typischerweise das 12-Stunden-Format mit AM/PM, während Deutsch das 24-Stunden-Format verwendet. Das relative Detailniveau bleibt über alle Locales hinweg konsistent.

Formatieren von Uhrzeiten mit timeStyle

Die Option timeStyle steuert die Uhrzeitformatierung. Jede Stilebene erzeugt unterschiedliche Ausgaben für dieselbe Uhrzeit.

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 somit am kompaktesten. Der mittlere Stil fügt Sekunden für mehr Präzision hinzu. Der lange Stil enthält einen abgekürzten Zeitzonencode. Der vollständige Stil schreibt den kompletten Zeitzonennamen für maximale Klarheit aus.

Kombinieren von dateStyle und timeStyle

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 erscheint mit langer Formatierung, während die Uhrzeit eine kurze Formatierung verwendet. Diese Kombination bietet detaillierten Datumskontext bei gleichzeitig prägnanter Zeitdarstellung.

Sie können je nach Bedarf jeden Datumsstil mit jedem Zeitstil kombinieren.

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 Details sowohl für Datum als auch für Uhrzeit. Das Mischen von Stilen ermöglicht es Ihnen, einen Aspekt gegenüber dem anderen hervorzuheben.

Wie Zeitstile in verschiedenen Sprachräumen variieren

Jeder Sprachraum formatiert Zeiten nach seinen eigenen Konventionen. Der gleiche Stil erzeugt unterschiedliche Ausgaben für verschiedene Sprachräume, aber das relative Detailniveau 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 Zeitzonenangaben mit einer für jeden Sprachraum angemessenen Formatierung hinzu.

Diese Unterschiede spiegeln die Konventionen jeder Kultur zur Darstellung der Zeit wider. Die API behandelt diese Variationen automatisch basierend auf der Sprachraum-ID.

Wann der kurze Stil verwendet werden sollte

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 in jedem Kontext, in dem eine sekundengenaue Präzision 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 Zeitauswahlfunktionen 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 Zeitzonenumrechnung transparent handhabt, wird die explizite Zeitzonenangabe überflüssig.

Wann der mittlere Stil verwendet werden sollte

Der mittlere Stil bietet Präzision auf Sekundenebene, während die Zeitzonenangaben implizit bleiben. Dies macht ihn geeignet für Kontexte, in denen die genaue Zeit wichtig ist, aber die Zeitzone 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 Zeitinformationen anzuzeigen. Die Sekundenpräzision hilft dabei, Muster zu identifizieren, Zeiträume zu messen und Ereignisse zu korrelieren.

Der mittlere Stil eignet sich gut, wenn Sie mehr Details benötigen als der kurze Stil bietet, aber nicht die Ausführlichkeit der Zeitzonenangaben 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 Zeitzonenangaben 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 Platz zu beanspruchen.

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 Unklarheiten darüber, welche Zeitzone die Zeit repräsentiert.

Flugbuchungssysteme, Konferenzplanungsanwendungen und Remote-Work-Tools verwenden den langen Stil, um Benutzern das Verständnis der Zeit in verschiedenen Zeitzonen zu erleichtern. Das Format balanciert Klarheit mit Platzeffizienz.

Wann der vollständige Stil verwendet werden sollte

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

Verwenden Sie den vollständigen Zeitstil, wenn Zeiten mit maximaler Klarheit angezeigt werden müssen. 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));
// Ausgabe: "Samstag, 15. März 2025 um 14:30:45 Nordamerikanische Westküsten-Normalzeit"

Der vollständige Stil eignet sich gut für die Anzeige einzelner wichtiger Ereignisse, Bestätigungsnachrichten oder überall dort, wo Benutzer von einem vollständigen zeitlichen Kontext profitieren. Internationale Besprechungseinladungen, Veranstaltungsbestätigungen und formelle Terminplanungskommunikationen profitieren von diesem Detaillierungsgrad.

Zeitsensible juristische Dokumente, offizielle Aufzeichnungen und Compliance-bezogene Zeitstempel verwenden den vollständigen Stil, um eindeutige Zeitinformationen festzulegen. 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 Stilvoreinstellungen oder der individuellen Konfiguration von Komponenten wählen.

Dies wird nicht funktionieren:

const formatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium",
  hour: "2-digit"  // Fehler: kann nicht kombiniert werden
});

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")));
// Ausgabe: "02:30:45 PM"

Sie können dateStyle und timeStyle zusammen verwenden, da sie unterschiedliche 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")));
// Ausgabe: "15. März 2025 um 14:30:45 EST"

Formatieren von Uhrzeiten für die Locale des Benutzers

Verwenden Sie die Spracheinstellungen des Browsers, um Uhrzeiten gemäß den Erwartungen jedes Benutzers zu formatieren. Die Eigenschaft navigator.language liefert die bevorzugte Locale des Benutzers.

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

const time = new Date("2025-03-15T14:30:00");
console.log(formatter.format(time));
// Ausgabe variiert je nach Locale des Benutzers
// Für en-US: "2:30 PM"
// Für de-DE: "14:30"
// Für fr-FR: "14:30"

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

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

Formatter für bessere Performance wiederverwenden

Das Erstellen von Intl.DateTimeFormat-Instanzen beinhaltet die Verarbeitung von Locale-Daten und Optionen. Wenn Sie mehrere Uhrzeiten 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));
});
// Ausgabe:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"

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

Was zu beachten ist

Die Option timeStyle bietet vordefinierte Formatierungsstufen: "short", "medium", "long" und "full". Jede Stufe repräsentiert ein unterschiedliches Gleichgewicht zwischen Kürze und Detail. 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 vordefinierten Einstellungen anstatt einzelne Zeitkomponenten manuell zu konfigurieren. Die vordefinierten Einstellungen erzeugen für jede Locale eine angemessene Ausgabe, ohne dass Sie die lokalen Formatierungsregeln verstehen müssen.

Sie können timeStyle mit dateStyle verwenden, aber nicht mit individuellen Komponentenoptionen wie hour oder minute kombinieren. Wählen Sie zwischen vordefinierten Stilen für Einfachheit oder individuellen Komponenten für präzise Kontrolle.

Formatieren Sie Uhrzeiten mit der Locale des Benutzers aus navigator.language, um Uhrzeiten entsprechend den Erwartungen jedes Benutzers anzuzeigen. Verwenden Sie Formatter-Instanzen wieder, wenn Sie mehrere Uhrzeiten formatieren, um eine bessere Performance zu erzielen.