Formatierung von Datum und Uhrzeit

Anzeige lokalisierter Datumsangaben anstelle mehrdeutiger Zahlen

Problem

Die Anzeige eines rohen Datums wie 10/12/2025 ist mehrdeutig. Ein Benutzer in den USA sieht es als 12. Oktober, während ein Benutzer in Großbritannien es als 10. Dezember sieht. Das einfache Hardcodieren eines einzelnen Formats (z. B. 'Oct 12, 2025') schafft eine Erfahrung, die sich für Benutzer in verschiedenen Regionen unnatürlich oder unleserlich anfühlt.

Lösung

Verwenden Sie eine dedizierte 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 eine korrekte, menschenlesbare Zeichenkette gemäß den Sprachregeln des Benutzers und verarbeitet dabei Reihenfolge, Trennzeichen und Monatsnamen.

Schritte

1. Erstellen Sie eine Client-Komponente für ein Datum

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

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

// 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. Übergeben Sie Formatierungsoptionen

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. Weitere Optionen sind "full", "medium" und "short".
  • timeStyle="short" fordert ein Format wie "15:00" an.

3. Verwenden Sie die Komponente auf einer Seite

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

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

export default function Home() {
  // This could come from a database or API
  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".