Wie man Datumsangaben für verschiedene Locales in React Router v7 formatiert

Problem

Datumsangaben haben kein universelles schriftliches Format. Die numerische Sequenz 10/12/2025 bedeutet in den Vereinigten Staaten den 12. Oktober, im Vereinigten Königreich jedoch den 10. Dezember. Selbst Formate wie "Oct 12, 2025" setzen englische Monatsnamen und eine spezifische Anordnungskonvention voraus, die möglicherweise nicht den Erwartungen der Benutzer entspricht. Wenn eine Anwendung Datumsangaben in einem einzigen festen Format anzeigt, wirkt dies für Benutzer in Regionen mit anderen Konventionen fremd, was Klarheit und Vertrauen reduziert.

Verschiedene Sprachregionen haben unterschiedliche Regeln für die Darstellung von Datumsangaben, einschließlich der Reihenfolge von Tag, Monat und Jahr, der Wahl der Trennzeichen und ob Monatsnamen ausgeschrieben oder abgekürzt werden. Wenn diese Konventionen ignoriert werden, müssen Benutzer Datumsangaben mental in ihr gewohntes Format übersetzen, was die kognitive Belastung und das Risiko von Fehlinterpretationen erhöht.

Lösung

Formatieren Sie Datumswerte entsprechend der Sprachregion des Benutzers, indem Sie die Darstellungslogik an Internationalisierungs-APIs delegieren, die regionale Konventionen verstehen. Anstatt Datumszeichenketten manuell zu konstruieren, übergeben Sie Datumsobjekte an Formatierungsfunktionen oder Komponenten, die die korrekte Reihenfolge, Trennzeichen und Monatsnamen für die aktive Sprachregion anwenden.

React-intl bietet sowohl deklarative Komponenten als auch imperative Methoden, die standardmäßige Datumsformatierungsoptionen akzeptieren und sprachregionsspezifische Zeichenketten erzeugen. Durch die Angabe, welche Datumsteile einbezogen werden sollen und mit welchem Detailgrad, kontrollieren Sie den Ausgabestil, während die Bibliothek regionale Variationen handhabt. Dieser Ansatz hält die Datumsformatierungslogik getrennt von Anzeigekomponenten und gewährleistet Konsistenz in der gesamten Anwendung.

Schritte

1. Formatieren von Datumsangaben in Komponenten mit FormattedDate

Verwenden Sie die FormattedDate-Komponente von react-intl, um Datumsangaben mit sprachregionsspezifischer Formatierung zu rendern. Die Komponente akzeptiert einen Datumswert und Formatierungsoptionen, die Intl.DateTimeFormatOptions entsprechen.

import { FormattedDate } from "react-intl";

export default function EventCard({ event }) {
  return (
    <article>
      <h2>{event.title}</h2>
      <time>
        <FormattedDate
          value={event.date}
          year="numeric"
          month="long"
          day="numeric"
        />
      </time>
      <p>{event.description}</p>
    </article>
  );
}

Die FormattedDate-Komponente verwendet die formatDate- und Intl.DateTimeFormat-APIs, um eine Zeichenkette zu erzeugen, die der vom umgebenden IntlProvider bereitgestellten Sprachregion entspricht. Die Optionen year, month und day steuern, welche Teile erscheinen und in welchem Format.

2. Formatieren Sie Datumsangaben imperativ mit useIntl

Verwenden Sie den useIntl-Hook, um auf die formatDate-Methode zuzugreifen, wenn Sie eine formatierte Datumszeichenfolge für nicht-gerenderte Kontexte wie Attribute, ARIA-Labels oder Datentransformationen benötigen.

import { useIntl } from "react-intl";

export default function EventList({ events }) {
  const intl = useIntl();

  return (
    <ul>
      {events.map((event) => {
        const formattedDate = intl.formatDate(event.date, {
          year: "numeric",
          month: "short",
          day: "numeric",
        });

        return (
          <li key={event.id}>
            <a
              href={`/events/${event.id}`}
              aria-label={`${event.title} on ${formattedDate}`}
            >
              {event.title}
            </a>
          </li>
        );
      })}
    </ul>
  );
}

Die formatDate-Funktion akzeptiert einen Datumswert und optionale Intl.DateTimeFormatOptions und gibt eine lokalisierte Zeichenfolge zurück. Dies ist nützlich, wenn das formatierte Datum in eine andere Zeichenfolge eingebettet oder als Prop-Wert verwendet werden muss.

3. Erstellen Sie einen wiederverwendbaren Datumsformatierer-Helper

Extrahieren Sie häufig verwendete Datumsformatierungsmuster in eine Hilfsfunktion, die intl.formatDate umschließt, um Konsistenz in der gesamten Anwendung zu gewährleisten.

import { useIntl } from "react-intl";

export function useDateFormatter() {
  const intl = useIntl();

  return {
    formatShortDate: (date: Date | number) =>
      intl.formatDate(date, {
        year: "numeric",
        month: "numeric",
        day: "numeric",
      }),

    formatLongDate: (date: Date | number) =>
      intl.formatDate(date, {
        year: "numeric",
        month: "long",
        day: "numeric",
      }),

    formatDateTime: (date: Date | number) =>
      intl.formatDate(date, {
        year: "numeric",
        month: "short",
        day: "numeric",
        hour: "numeric",
        minute: "2-digit",
      }),
  };
}

Dieser Hook zentralisiert die Formatierungslogik und erleichtert die Anwendung konsistenter Datumsstile in der gesamten Anwendung. Komponenten rufen die entsprechende Methode basierend auf dem gewünschten Detaillierungsgrad auf.

4. Formatieren Sie Datumsangaben in Route-Loadern

Wenn während des Datenabrufs eine Datumsformatierung benötigt wird, greifen Sie auf die Locale aus der Anfrage zu und verwenden Sie createIntl, um Daten vor der Rückgabe der Loader-Daten zu formatieren.

import type { Route } from "./+types/event";
import { createIntl, createIntlCache } from "react-intl";

const cache = createIntlCache();

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const locale = url.searchParams.get("locale") || "en";

  const event = await fetchEvent();

  const intl = createIntl({ locale, messages: {} }, cache);

  return {
    event,
    formattedDate: intl.formatDate(event.date, {
      year: "numeric",
      month: "long",
      day: "numeric",
    }),
  };
}

export default function Event({ loaderData }: Route.ComponentProps) {
  return (
    <article>
      <h1>{loaderData.event.title}</h1>
      <time>{loaderData.formattedDate}</time>
    </article>
  );
}

Die Funktion createIntl erstellt ein intl-Objekt, das Datumsangaben außerhalb von React-Komponenten formatieren kann. Dieser Ansatz formatiert Datumsangaben vorab auf dem Server oder während der statischen Generierung und reduziert so die clientseitige Verarbeitung.