Wie zeige ich nur bestimmte Teile eines Datums an?

Einführung

Vollständige Datumsformate wie "Dienstag, 15. Oktober 2024" funktionieren in einigen Kontexten gut, aber oft müssen Sie nur bestimmte Teile eines Datums anzeigen. Sie möchten vielleicht nur Monat und Jahr für ein Veröffentlichungsdatum, nur den Wochentag für einen Kalender oder nur Tag und Monat für einen Geburtstag anzeigen.

JavaScripts Intl.DateTimeFormat bietet individuelle Optionen für jede Datumskomponente. Anstatt einen vordefinierten Stil wie "full" oder "short" zu wählen, geben Sie genau an, welche Teile einbezogen werden sollen und wie jeder einzelne formatiert werden soll.

Datumskomponenten verstehen

Ein Datum enthält vier primäre Komponenten, die Sie unabhängig voneinander formatieren können.

Der weekday zeigt an, welcher Wochentag es ist. Das year zeigt an, welches Jahr. Der month zeigt an, welcher Monat des Jahres. Der day zeigt an, welcher Tag des Monats.

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

Den Wochentag formatieren

Die Option weekday zeigt den Wochentag an. Sie akzeptiert drei Werte, die die Länge der Ausgabe steuern.

const date = new Date('2024-10-15');

const narrow = new Intl.DateTimeFormat('en-US', {
  weekday: 'narrow'
});
console.log(narrow.format(date)); // "T"

const short = new Intl.DateTimeFormat('en-US', {
  weekday: 'short'
});
console.log(short.format(date)); // "Tue"

const long = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});
console.log(long.format(date)); // "Tuesday"

Der Wert narrow erzeugt einen einzelnen Buchstaben. Der Wert short erzeugt einen abgekürzten Namen. Der Wert long erzeugt den vollständigen Wochentagsnamen.

Zwei Wochentage können in einigen Sprachen den gleichen schmalen Stil haben. Zum Beispiel beginnen Dienstag (Tuesday) und Donnerstag (Thursday) im Englischen beide mit "T".

Das Jahr formatieren

Die Option year zeigt das Jahr an. Sie akzeptiert zwei Werte.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  year: 'numeric'
});
console.log(numeric.format(date)); // "2024"

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

Der Wert numeric zeigt das vollständige Jahr an. Der Wert 2-digit zeigt nur die letzten zwei Ziffern an.

Den Monat formatieren

Die Option month zeigt den Monat des Jahres an. Sie akzeptiert fünf Werte, die unterschiedliche Detailebenen bieten.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  month: 'numeric'
});
console.log(numeric.format(date)); // "10"

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

const narrow = new Intl.DateTimeFormat('en-US', {
  month: 'narrow'
});
console.log(narrow.format(date)); // "O"

const short = new Intl.DateTimeFormat('en-US', {
  month: 'short'
});
console.log(short.format(date)); // "Oct"

const long = new Intl.DateTimeFormat('en-US', {
  month: 'long'
});
console.log(long.format(date)); // "October"

Der Wert numeric zeigt den Monat als Zahl ohne führende Nullen an. Der Wert 2-digit zeigt den Monat als Zahl mit führenden Nullen an. Der Wert narrow erzeugt einen einzelnen Buchstaben. Der Wert short erzeugt einen abgekürzten Monatsnamen. Der Wert long erzeugt den vollständigen Monatsnamen.

In einigen Sprachen können zwei Monate denselben schmalen Stil haben. Zum Beispiel beginnen März und Mai im Englischen beide mit "M".

Den Tag formatieren

Die Option day zeigt den Tag des Monats an. Sie akzeptiert zwei Werte.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  day: 'numeric'
});
console.log(numeric.format(date)); // "15"

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

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

Für einstellige Tage erzeugt numeric Werte wie "5", während 2-digit "05" erzeugt.

Mehrere Datumskomponenten kombinieren

Sie können mehrere Optionen in einem einzigen Formatierer angeben, um genau die Kombination anzuzeigen, die Sie benötigen.

const date = new Date('2024-10-15');

// Nur Monat und Jahr
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// Nur Wochentag und Tag
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// Nur Monat und Tag
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// Alle Komponenten mit benutzerdefinierter Formatierung
const custom = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit'
});
console.log(custom.format(date)); // "Tuesday, Oct 15, 2024"

Der Formatierer ordnet die Komponenten automatisch gemäß den Konventionen der Locale an. Sie müssen sich keine Gedanken über die Reihenfolge oder Interpunktion machen.

Wie Optionen über verschiedene Locales hinweg funktionieren

Dieselben Optionen erzeugen in verschiedenen Locales unterschiedliche Ausgaben. Jede Locale folgt ihren eigenen Konventionen für die Anordnung und Formatierung von Datumskomponenten.

const date = new Date('2024-10-15');
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024"

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024"

const ja = new Intl.DateTimeFormat('ja-JP', options);
console.log(ja.format(date)); // "2024年10月15日"

const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date)); // "١٥ أكتوبر ٢٠٢٤"

Im Deutschen steht der Tag zuerst und es wird ein Punkt als Trennzeichen verwendet. Japanisch verwendet die Reihenfolge Jahr-Monat-Tag mit japanischen Zeichen. Arabisch verwendet arabische Schrift sowohl für den Monatsnamen als auch für die Zahlen.

Die Namen der Wochentage und Monate ändern sich ebenfalls je nach Locale.

const date = new Date('2024-10-15');
const options = {
  weekday: 'long',
  month: 'long'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "Tuesday, October"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "mardi octobre"

const es = new Intl.DateTimeFormat('es-ES', options);
console.log(es.format(date)); // "martes, octubre"

Im Französischen werden sowohl Wochentags- als auch Monatsnamen kleingeschrieben. Spanisch verwendet ebenfalls Kleinbuchstaben, enthält aber ein Komma als Trennzeichen.

Häufige Anwendungsfälle

Die Anzeige von Monat und Jahr eignet sich gut für Veröffentlichungsdaten und Archivlisten.

const date = new Date('2024-10-15');

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

console.log(`Published: ${formatter.format(date)}`);
// "Published: October 2024"

Die Anzeige von Wochentagsnamen eignet sich gut für Kalender und Zeitpläne.

const date = new Date('2024-10-15');

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

console.log(`Event on ${formatter.format(date)}`);
// "Event on Tuesday"

Die Anzeige von Monat und Tag ohne Jahr eignet sich gut für Geburtstage und jährliche Ereignisse.

const date = new Date('2024-10-15');

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

console.log(`Birthday: ${formatter.format(date)}`);
// "Birthday: October 15"

Zusammenfassung

Das Options-Objekt von Intl.DateTimeFormat ermöglicht es, bestimmte Teile eines Datums anstelle des vollständigen Datums anzuzeigen. Die Option weekday akzeptiert narrow, short oder long. Die Option year akzeptiert numeric oder 2-digit. Die Option month akzeptiert numeric, 2-digit, narrow, short oder long. Die Option day akzeptiert numeric oder 2-digit.

Sie können mehrere Optionen kombinieren, um genau die benötigten Teile anzuzeigen. Der Formatierer behandelt automatisch die Reihenfolge und Zeichensetzung basierend auf dem Gebietsschema. Verschiedene Gebietsschemas verwenden unterschiedliche Konventionen für die Anzeige derselben Datumskomponenten.