Wie zeige ich nur bestimmte Teile eines Datums an?

Einführung

Vollständige Datumsformate wie „Dienstag, 15. Oktober 2024" funktionieren in manchen 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 anzeigen, nur den Wochentag für einen Kalender oder nur Tag und Monat für einen Geburtstag.

JavaScripts Intl.DateTimeFormat bietet individuelle Optionen für jede Datumskomponente. Anstatt einen voreingestellten 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 es ist. Der month zeigt an, welcher Monat des Jahres es ist. Der day zeigt an, welcher Tag des Monats es ist.

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

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 manchen Sprachen denselben Narrow-Stil haben. Zum Beispiel beginnen Dienstag und Donnerstag im Deutschen beide mit „D".

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 beiden Ziffern an.

Den Monat formatieren

Die Option month zeigt den Monat des Jahres an. Sie akzeptiert fünf Werte, die unterschiedliche Detailstufen 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.

Zwei Monate können in einigen Gebietsschemata denselben Narrow-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.

Bei einstelligen Tagen erzeugt numeric Werte wie "5", während 2-digit "05" erzeugt.

Mehrere Datumsbestandteile kombinieren

Sie können mehrere Optionen in einem einzelnen Formatter angeben, um genau die gewünschte Kombination anzuzeigen.

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

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

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

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

// All components with custom formatting
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 Formatter ordnet die Komponenten automatisch gemäß den Konventionen des Gebietsschemas an. Sie müssen sich keine Gedanken über die Reihenfolge oder Interpunktion machen.

Wie Optionen über Locales hinweg funktionieren

Dieselben Optionen erzeugen in verschiedenen Locales unterschiedliche Ausgaben. Jedes Locale folgt seinen eigenen Konventionen für die Anordnung und Formatierung von Datumsbestandteilen.

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)); // "١٥ أكتوبر ٢٠٢٤"

Deutsch stellt den Tag an erste Stelle und verwendet einen Punkt als Trennzeichen. Japanisch verwendet die Reihenfolge Jahr-Monat-Tag mit japanischen Zeichen. Arabisch verwendet arabische Schrift sowohl für den Monatsnamen als auch für Zahlen.

Die Wochentags- und Monatsnamen ändern sich ebenfalls basierend auf dem 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"

Französisch verwendet Kleinschreibung sowohl für Wochentags- als auch für Monatsnamen. Spanisch verwendet ebenfalls Kleinschreibung, fügt aber ein Komma als Trennzeichen hinzu.

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 Intl.DateTimeFormat-Optionsobjekt ermöglicht es Ihnen, bestimmte Teile eines Datums anstelle des vollständigen Datums anzuzeigen. Die weekday-Option akzeptiert narrow, short oder long. Die year-Option akzeptiert numeric oder 2-digit. Die month-Option akzeptiert numeric, 2-digit, narrow, short oder long. Die day-Option akzeptiert numeric oder 2-digit.

Sie können mehrere Optionen kombinieren, um genau die Teile anzuzeigen, die Sie benötigen. Der Formatter übernimmt automatisch die Anordnung und Zeichensetzung basierend auf dem Locale. Verschiedene Locales verwenden unterschiedliche Konventionen für die Anzeige derselben Datumskomponenten.