Formatierung von Datum und Uhrzeit

Anzeige lokalisierter Datumsangaben anstelle von mehrdeutigen Zahlen

Problem

Die Anzeige eines rohen Datums wie 10/12/2025 ist mehrdeutig. Ein Nutzer in den USA interpretiert es als 12. Oktober, während ein Nutzer in Großbritannien es als 10. Dezember versteht. Einfach ein einzelnes Format fest zu codieren (z.B. 'Okt 12, 2025') erzeugt eine Erfahrung, die sich für Nutzer in verschiedenen Regionen unnatürlich oder unleserlich anfühlt.

Lösung

Verwenden Sie eine spezielle Formatierungskomponente aus einer Bibliothek wie react-intl. Eine Komponente wie FormattedDate liest automatisch die aktuelle Sprache aus ihrem Provider. Sie formatiert ein Date-Objekt in einen korrekten, menschenlesbaren String gemäß den Sprachregeln des Nutzers und berücksichtigt dabei Reihenfolge, Trennzeichen und Monatsnamen.

Schritte

1. Erstellen einer Client-Komponente für ein Datum

Da die react-intl-Komponenten einen IntlProvider benötigen, müssen sie innerhalb von Client-Komponenten verwendet werden.

Erstellen Sie eine neue Komponente, app/components/PostDetails.tsx, die ein formatiertes Datum anzeigen wird.

// app/components/PostDetails.tsx
'use client';

import { FormattedDate } from 'react-intl';

type Props = {
  publishDate: Date;
};

export default function PostDetails({ publishDate }: Props) {
  return (
    <div>
      Posted on:
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

Diese Komponente akzeptiert ein Date-Objekt als Prop. Sie verwendet dann FormattedDate, um es zu rendern.

2. Formatierungsoptionen übergeben

Die FormattedDate-Komponente akzeptiert Optionen zur Steuerung der Ausgabe. Im obigen Beispiel:

  • value ist das zu formatierende Date-Objekt.
  • dateStyle="long" fordert ein Format wie "10. Dezember 2025" an. Andere Optionen sind "full", "medium" und "short".
  • timeStyle="short" fordert ein Format wie "15:00 Uhr" an.

3. Die Komponente auf einer Seite verwenden

Jetzt können Sie Ihre neue Komponente auf jeder Seite verwenden, wie zum Beispiel auf Ihrer Startseite.

// app/[lang]/page.tsx
import PostDetails from '@/app/components/PostDetails';

export default function Home() {
  // Dies könnte aus einer Datenbank oder API stammen
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>My blog post</h1>
      <PostDetails publishDate={myPostDate} />
      <p>This is the content of the post...</p>
    </div>
  );
}

Ein Benutzer, der /en besucht, sieht "Posted on: December 10, 2025 at 3:00 PM". Ein Benutzer, der /es besucht, sieht "Posted on: 10 de diciembre de 2025, 15:00".