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 Planungsoberfläche könnte nur die Stunde eines Termins anzeigen.

Wenn Sie Zeiten mit vordefinierten Stilen wie timeStyle: "short" formatieren, erhalten Sie ein Bündel von Komponenten, die vom Gebietsschema gewä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 möchten, funktioniert die Voreinstellung nicht für Ihre Anforderungen.

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

Zeitkomponenten verstehen

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

Die Option hour zeigt an, welche Stunde des Tages es ist. Die Option minute zeigt an, welche Minute der Stunde es ist. Die Option second zeigt an, welche Sekunde der Minute es ist.

Jede Komponente akzeptiert Formatierungswerte, die steuern, wie sie angezeigt wird. Sie fügen nur die Komponenten ein, die Sie im Optionsobjekt benötigen.

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 bei Bedarf mit führenden Nullen an.

Für amerikanisches Englisch verwendet der Formatter das 12-Stunden-Format mit AM/PM-Indikatoren. Andere Gebietsschemata 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 Sekundenanteils eines Zeitstempels.

Stunden und Minuten kombinieren

Die meisten Zeitanzeigen zeigen sowohl Stunden als auch Minuten an. Sie können diese Optionen in einem einzigen Formatter 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 Formatter fügt automatisch geeignete Trennzeichen und Formatierungen basierend auf dem Gebietsschema hinzu. Für amerikanisches Englisch erzeugt dies ein Doppelpunkt-Trennzeichen mit einem AM/PM-Indikator.

Sie geben weder das Trennzeichen noch die Reihenfolge an. Das Gebietsschema bestimmt diese Details.

Stunden, Minuten und Sekunden kombinieren

Sie können alle drei Zeitkomponenten einbeziehen, 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 verarbeitet alle Trennzeichen und Formatierungskonventionen.

Stunden und Sekunden ohne Minuten kombinieren

Sie können auch Stunden und Sekunden kombinieren, ohne Minuten einzuschließen, obwohl dies unüblich 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 bei ungewöhnlichen Komponentenkombinationen eine sinnvolle Ausgabe.

Wählen Sie zwischen numerischer und 2-stelliger Formatierung

Der Unterschied zwischen numeric und 2-digit ist vor allem bei einstelligen Werten relevant.

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 2-digit in den meisten Fällen für Minuten und Sekunden. Dies gewährleistet eine konsistente Breite und Ausrichtung in Tabellen, Listen oder digitalen Uhrenanzeigen. Ohne führende Nullen wirken Zeitangaben wie "8:5 AM" unregelmäßig.

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 Locale variiert

Verschiedene Locales verwenden unterschiedliche Konventionen zur Anzeige von Stunden. Amerikanisches Englisch verwendet das 12-Stunden-Format mit AM/PM-Indikatoren. Viele andere Locales 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 für alle Locales dieselben Optionen an. Der Formatter wendet automatisch das entsprechende Stundenformat basierend auf den Locale-Konventionen an.

Wie Trennzeichen je nach Locale variieren

Das Trennzeichen zwischen Zeitkomponenten variiert ebenfalls je nach Locale.

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 Komponenten. Finnisch verwendet Punkte. Sie geben das Trennzeichen nicht an. Der Formatter wählt das entsprechende Trennzeichen für jede Locale.

Wann einzelne Zeitkomponenten verwendet werden sollten

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

Wenn Sie Stunden und Minuten, aber keine Sekunden benötigen und die timeStyle: "short"-Voreinstellung 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 hour-Option.

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 second-Option.

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

Wann stattdessen Zeitstile verwendet werden sollten

Wenn Sie eine vollständige Zeitanzeige benötigen und die vordefinierten Stile für Ihr Gebietsschema funktionieren, verwenden Sie stattdessen timeStyle. Die vordefinierten Stile sind einfacher und gewährleisten eine konsistente Formatierung über alle Gebietsschemas 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, gebietsschema-gerechte 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 Sekundenpräzision 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 Protokollen 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 legt bereits fest, welche Komponenten angezeigt werden und wie sie formatiert werden.

Dies funktioniert nicht:

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

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. Dadurch können Sie bestimmte Datumsteile und bestimmte Zeitteile zusammen anzeigen.

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 Zeitkomponenten auch 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));
// Displays time converted to New York timezone

Zeiten für das Gebietsschema der Benutzer formatieren

Verwenden Sie die Spracheinstellungen des Browsers, um Zeiten entsprechend den Erwartungen der einzelnen Benutzer 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));
// Output varies by user's locale
// For en-US: "2:05 PM"
// For de-DE: "14:05"
// For ja-JP: "14:05"

Dadurch werden automatisch das entsprechende Stundenformat, Trennzeichen und AM/PM-Indikatoren basierend auf dem Gebietsschema der einzelnen Benutzer angewendet.

Formatierer zur Leistungsverbesserung wiederverwenden

Das Erstellen von Intl.DateTimeFormat-Instanzen umfasst die Verarbeitung von Gebietsschemadaten und Optionen. Wenn Sie mehrmals mit denselben Einstellungen formatieren, erstellen Sie den Formatierer 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));
});
// Output for en-US:
// "9:00 AM"
// "2:30 PM"
// "6:45 PM"

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

Was Sie sich merken sollten

Die Optionen hour, minute und second ermöglichen es Ihnen, bestimmte Zeitkomponenten anstelle vollständiger Zeiten anzuzeigen. Jede Option akzeptiert die Werte numeric oder 2-digit. Der Wert numeric lässt führende Nullen weg. Der Wert 2-digit enthält führende Nullen.

Sie können mehrere Optionen kombinieren, um genau die Komponenten anzuzeigen, die Sie benötigen. Der Formatter verarbeitet 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 für alle Locales dieselben Optionen an und der Formatter 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 eine Standardformatierung wünschen. Sie können einzelne Komponentenoptionen nicht mit Zeitstiloptionen kombinieren.

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