Wie zeige ich nur Stunden, Minuten oder Sekunden an?

Einführung

Zeitanzeigen müssen oft nur bestimmte Komponenten anzeigen. Ein Uhr-Widget könnte nur Stunden und Minuten ohne Sekunden anzeigen. Ein Countdown-Timer könnte nur Sekunden anzeigen. Eine Terminplanungsschnittstelle könnte nur die Stunde eines Termins anzeigen.

Wenn Sie Zeiten mit voreingestellten Stilen wie timeStyle: "short" formatieren, erhalten Sie ein Bündel von Komponenten, die von der Locale ausgewählt werden. Sie können einzelne Teile nicht entfernen oder bestimmte hinzufügen. Wenn der kurze Stil Sekunden enthält, Sie aber nur Stunden und Minuten wünschen, funktioniert die Voreinstellung nicht für Ihre Bedürfnisse.

JavaScripts Intl.DateTimeFormat bietet individuelle Optionen für jede Zeitkomponente. Sie können genau angeben, welche Teile einbezogen werden sollen und wie jedes einzelne formatiert werden soll. Diese Lektion erklärt, wie man Stunden, Minuten und Sekunden separat oder in bestimmten Kombinationen anzeigt.

Zeitkomponenten verstehen

Eine Zeit enthält drei primäre Komponenten, die Sie unabhängig voneinander formatieren können.

Die hour zeigt, welche Stunde des Tages. Die minute zeigt, welche Minute der Stunde. Die second zeigt, welche Sekunde der Minute.

Jede Komponente akzeptiert Formatierungswerte, die steuern, wie sie angezeigt wird. Sie fügen nur die Komponenten, die Sie benötigen, in das Options-Objekt ein.

Nur Stunden formatieren

Die Option hour zeigt die Stundenkomponente an. Sie akzeptiert zwei Werte.

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});
console.log(numeric.format(time)); // "2 PM"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit'
});
console.log(twoDigit.format(time)); // "02 PM"

Der Wert numeric zeigt die Stunde ohne führende Nullen an. Der Wert 2-digit zeigt die Stunde mit führenden Nullen an, wenn nötig.

Für amerikanisches Englisch verwendet der Formatierer das 12-Stunden-Format mit AM/PM-Indikatoren. Andere Locales verwenden unterschiedliche Konventionen, die in dieser Lektion später behandelt werden.

Nur Minuten formatieren

Die Option minute zeigt die Minutenkomponente an. Sie akzeptiert zwei Werte.

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  minute: 'numeric'
});
console.log(numeric.format(time)); // "5"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  minute: '2-digit'
});
console.log(twoDigit.format(time)); // "05"

Der Wert numeric zeigt die Minute ohne führende Nullen an. Der Wert 2-digit zeigt die Minute mit führenden Nullen an.

Die alleinige Anzeige von Minuten ist weniger üblich als die alleinige Anzeige von Stunden oder Sekunden. Die meisten Zeitanzeigen kombinieren Minuten mit Stunden.

Nur Sekunden formatieren

Die Option second zeigt die Sekundenkomponente an. Sie akzeptiert zwei Werte.

const time = new Date('2025-03-15T14:05:08');

const numeric = new Intl.DateTimeFormat('en-US', {
  second: 'numeric'
});
console.log(numeric.format(time)); // "8"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});
console.log(twoDigit.format(time)); // "08"

Der Wert numeric zeigt die Sekunde ohne führende Nullen an. Der Wert 2-digit zeigt die Sekunde mit führenden Nullen an.

Dies eignet sich gut für die Anzeige verstrichener Sekunden in einem Zähler oder für die Anzeige des Sekundenteils eines Zeitstempels.

Stunden und Minuten kombinieren

Die meisten Zeitanzeigen zeigen sowohl Stunden als auch Minuten an. Sie können diese Optionen in einem einzigen Formatierer kombinieren.

const time = new Date('2025-03-15T14:05:00');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(formatter.format(time)); // "2:05 PM"

Der Formatierer fügt automatisch entsprechende Trennzeichen und Formatierungen basierend auf dem Gebietsschema hinzu. Für amerikanisches Englisch erzeugt dies ein Doppelpunkt-Trennzeichen mit einer AM/PM-Anzeige.

Sie geben das Trennzeichen oder die Reihenfolge nicht an. Das Gebietsschema bestimmt diese Details.

Stunden, Minuten und Sekunden kombinieren

Sie können alle drei Zeitkomponenten einschließen, wenn Sie vollständige Zeitpräzision benötigen.

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:05:08 PM"

Dies erzeugt eine vollständige Zeit mit Stunden, Minuten und Sekunden. Der Formatter übernimmt alle Trennzeichen und Formatierungskonventionen.

Stunden und Sekunden ohne Minuten kombinieren

Sie können auch Stunden und Sekunden kombinieren, ohne Minuten einzuschließen, obwohl dies ungewöhnlich ist.

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:08 PM"

Der Formatter erzeugt auch für ungewöhnliche Komponentenkombinationen eine vernünftige Ausgabe.

Zwischen numerischer und 2-stelliger Formatierung wählen

Der Unterschied zwischen numeric und 2-digit ist besonders wichtig für einstellige Werte.

const earlyTime = new Date('2025-03-15T08:05:03');
const lateTime = new Date('2025-03-15T14:35:48');

const numericFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

const digitFormatter = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});

console.log('Numeric:');
console.log(numericFormatter.format(earlyTime)); // "8:5:3 AM"
console.log(numericFormatter.format(lateTime)); // "2:35:48 PM"

console.log('2-digit:');
console.log(digitFormatter.format(earlyTime)); // "08:05:03 AM"
console.log(digitFormatter.format(lateTime)); // "02:35:48 PM"

Das Format numeric lässt führende Nullen weg und erzeugt Werte wie "8:5:3 AM". Das Format 2-digit enthält führende Nullen und erzeugt "08:05:03 AM".

Verwenden Sie in den meisten Fällen 2-digit für Minuten und Sekunden. Dies gewährleistet eine einheitliche Breite und Ausrichtung in Tabellen, Listen oder digitalen Uhrenanzeigen. Ohne führende Nullen sehen Zeiten wie "8:5 AM" unregelmäßig aus.

Bei Stunden hängt die Wahl von Ihrem Design ab. Digitaluhren verwenden oft 2-digit für Konsistenz. Textanzeigen verwenden oft numeric für ein natürlicheres Erscheinungsbild.

Wie die Stundenformatierung je nach Gebietsschema variiert

Verschiedene Gebietsschemas verwenden unterschiedliche Konventionen zur Anzeige von Stunden. Amerikanisches Englisch verwendet das 12-Stunden-Format mit AM/PM-Indikatoren. Viele andere Gebietsschemas verwenden das 24-Stunden-Format.

const time = new Date('2025-03-15T14:05:00');

const en = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(en.format(time)); // "2:05 PM"

const de = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(de.format(time)); // "14:05"

const fr = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(fr.format(time)); // "14:05"

const ja = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(ja.format(time)); // "14:05"

Amerikanisches Englisch konvertiert den 24-Stunden-Wert in das 12-Stunden-Format und fügt "PM" hinzu. Deutsch, Französisch und Japanisch verwenden alle das 24-Stunden-Format ohne AM/PM-Indikatoren.

Sie geben die gleichen Optionen für alle Gebietsschemas an. Der Formatierer wendet automatisch das entsprechende Stundenformat basierend auf den Konventionen des Gebietsschemas an.

Wie Trennzeichen je nach Gebietsschema variieren

Das Trennzeichen zwischen Zeitkomponenten variiert ebenfalls je nach Gebietsschema.

const time = new Date('2025-03-15T14:05:08');
const options = {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(time)); // "2:05:08 PM"

const fi = new Intl.DateTimeFormat('fi-FI', options);
console.log(fi.format(time)); // "14.05.08"

Amerikanisches Englisch verwendet Doppelpunkte zwischen den Komponenten. Finnisch verwendet Punkte. Sie geben das Trennzeichen nicht an. Der Formatierer wählt das entsprechende Trennzeichen für jedes Gebietsschema.

Wann einzelne Zeitkomponenten verwendet werden sollten

Verwenden Sie einzelne Zeitkomponenten, wenn voreingestellte Zeitstile nicht Ihren Anforderungen entsprechen.

Wenn Sie Stunden und Minuten, aber keine Sekunden benötigen, und die Voreinstellung timeStyle: "short" für Ihr Zielgebietsschema Sekunden enthält, geben Sie hour und minute einzeln an.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

Wenn Sie nur die Stunde für eine vereinfachte Uhr oder einen Zeitplan anzeigen müssen, verwenden Sie nur die Option hour.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

Wenn Sie verstrichene Sekunden in einem Timer oder Zähler anzeigen müssen, verwenden Sie nur die Option second.

const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

Wann stattdessen Zeitstile verwenden

Wenn Sie eine vollständige Zeitanzeige benötigen und die voreingestellten Stile für Ihre Locale funktionieren, verwenden Sie stattdessen timeStyle. Die voreingestellten Stile sind einfacher und gewährleisten eine konsistente Formatierung über alle Locales hinweg.

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

Dies wählt automatisch geeignete Komponenten und Formatierungen aus, ohne dass Sie einzelne Optionen angeben müssen.

Verwenden Sie einzelne Zeitkomponenten, wenn Sie präzise Kontrolle darüber benötigen, welche Teile angezeigt werden. Verwenden Sie Zeitstile, wenn Sie eine standardmäßige, für die Locale angemessene Formatierung ohne Anpassung wünschen.

Häufige Anwendungsfälle für spezifische Zeitteile

Zeigen Sie nur Stunden für Terminplanungsschnittstellen an, bei denen die genaue Minute weniger wichtig ist oder separat behandelt wird.

const time = new Date('2025-03-15T14:00:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

console.log(`Meeting at ${formatter.format(time)}`);
// "Meeting at 2 PM"

Zeigen Sie Stunden und Minuten für die meisten Uhr-Widgets und Zeitanzeigen an, bei denen Sekundengenauigkeit nicht erforderlich ist.

const time = new Date('2025-03-15T14:05:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

console.log(formatter.format(time));
// "2:05 PM"

Zeigen Sie Sekunden allein für Countdown-Timer an, die verstrichene Sekunden anzeigen.

const time = new Date('2025-03-15T00:00:45');
const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

console.log(`${formatter.format(time)} seconds remaining`);
// "45 seconds remaining"

Zeigen Sie Stunden, Minuten und Sekunden für präzise Zeitstempel in Logs oder Audit-Trails an.

const time = new Date('2025-03-15T14:05:08');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});

console.log(`Event logged at ${formatter.format(time)}`);
// "Event logged at 2:05:08 PM"

Einschränkungen bei der Verwendung einzelner Komponenten

Sie können einzelne Zeitkomponentenoptionen wie hour, minute oder second nicht mit der Option timeStyle kombinieren. Die Voreinstellung timeStyle bestimmt bereits, welche Komponenten angezeigt werden und wie sie formatiert werden.

Dies wird nicht funktionieren:

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

Wählen Sie zwischen der Verwendung von Zeitstilen oder der Konfiguration einzelner Komponenten. Sie können nicht beides verwenden.

Sie können Zeitkomponentenoptionen mit Datumskomponentenoptionen kombinieren. Dies ermöglicht es Ihnen, bestimmte Datumsteile und bestimmte Zeitteile zusammen anzuzeigen.

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit'
});

const datetime = new Date('2025-03-15T14:05:00');
console.log(formatter.format(datetime));
// "Mar 15, 2:05 PM"

Sie können auch Zeitkomponenten mit Optionen wie timeZone, calendar oder numberingSystem kombinieren.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  timeZone: 'America/New_York'
});

const time = new Date('2025-03-15T14:05:00Z');
console.log(formatter.format(time));
// Zeigt die Zeit konvertiert in die New York Zeitzone an

Formatieren Sie Zeiten für die Locale des Benutzers

Verwenden Sie die Spracheinstellungen des Browsers, um Zeiten entsprechend den Erwartungen jedes Benutzers zu formatieren.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

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

Dies wendet automatisch das entsprechende Stundenformat, Trennzeichen und AM/PM-Indikatoren basierend auf der Locale jedes Benutzers an.

Formatter wiederverwenden für bessere Performance

Das Erstellen von Intl.DateTimeFormat-Instanzen beinhaltet die Verarbeitung von Locale-Daten und Optionen. Wenn Sie mehrere Zeiten mit den gleichen Einstellungen formatieren, erstellen Sie den Formatter einmal und verwenden Sie ihn wieder.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const times = [
  new Date('2025-03-15T09:00:00'),
  new Date('2025-03-15T14:30:00'),
  new Date('2025-03-15T18:45:00')
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// Ausgabe für en-US:
// "9:00 AM"
// "2:30 PM"
// "6:45 PM"

Dieses Muster verbessert die Leistung beim Formatieren von Zeitarrays oder beim Anzeigen vieler Zeitstempel in einer Benutzeroberfläche.

Was zu beachten ist

Die Optionen hour, minute und second ermöglichen die Anzeige spezifischer Zeitkomponenten anstelle vollständiger Zeitangaben. Jede Option akzeptiert die Werte numeric oder 2-digit. Der Wert numeric lässt führende Nullen weg. Der Wert 2-digit fügt führende Nullen hinzu.

Sie können mehrere Optionen kombinieren, um genau die benötigten Komponenten anzuzeigen. Der Formatierer verwaltet automatisch Trennzeichen, Reihenfolge und Formatierung basierend auf der Locale.

Die Stundenformatierung variiert je nach Locale. Einige Locales verwenden das 12-Stunden-Format mit AM/PM-Indikatoren. Andere verwenden das 24-Stunden-Format ohne Indikatoren. Sie geben dieselben Optionen für alle Locales an, und der Formatierer wendet die entsprechenden Konventionen an.

Verwenden Sie einzelne Zeitkomponenten, wenn Sie präzise Kontrolle darüber benötigen, welche Teile angezeigt werden. Verwenden Sie Zeitstile, wenn Sie Standardformatierung wünschen. Sie können einzelne Komponentenoptionen nicht mit Zeitstiloptionen kombinieren.

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