So formatieren Sie Datumsangaben für verschiedene Gebietsschemata in React Router v7

Problem

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

Verschiedene Gebietsschemata haben unterschiedliche Regeln für die Datumsdarstellung, einschließlich der Reihenfolge von Tag, Monat und Jahr, der Wahl der Trennzeichen und ob Monatsnamen ausgeschrieben oder abgekürzt werden. Das Ignorieren dieser Konventionen zwingt Benutzer, Datumsangaben mental in ihr vertrautes Format zu übersetzen, was die kognitive Belastung und das Risiko von Fehlinterpretationen erhöht.

Lösung

Formatieren Sie Datumswerte entsprechend dem Gebietsschema des Benutzers, indem Sie die Präsentationslogik an Internationalisierungs-APIs delegieren, die regionale Konventionen verstehen. Anstatt Datumszeichenfolgen manuell zu konstruieren, übergeben Sie Datumsobjekte an Formatierungsfunktionen oder Komponenten, die die korrekte Reihenfolge, Trennzeichen und Monatsnamen für das aktive Gebietsschema anwenden.

React-intl bietet sowohl deklarative Komponenten als auch imperative Methoden, die standardmäßige Datumsformatierungsoptionen akzeptieren und gebietsschemabewusste Zeichenfolgen erzeugen. Indem Sie angeben, welche Datumsteile einbezogen werden sollen und deren Detailgrad, steuern Sie den Ausgabestil, während die Bibliothek regionale Variationen verarbeitet. Dieser Ansatz hält die Datumsformatierungslogik von Anzeigekomponenten getrennt und gewährleistet Konsistenz in der gesamten Anwendung.

Schritte

1. Datumsangaben in Komponenten mit FormattedDate formatieren

Verwenden Sie die FormattedDate-Komponente von react-intl, um Datumsangaben mit gebietsschemaspezifischer 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 dem vom umgebenden IntlProvider bereitgestellten Gebietsschema entspricht. Die Optionen year, month und day steuern, welche Teile angezeigt werden und in welchem Format.

2. Datumsangaben imperativ mit useIntl formatieren

Verwenden Sie den useIntl-Hook, um auf die formatDate-Methode zuzugreifen, wenn Sie eine formatierte Datumszeichenkette 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 gebietsschemaspezifisch formatierte Zeichenkette zurück. Dies ist nützlich, wenn das formatierte Datum in eine andere Zeichenkette eingebettet oder als Prop-Wert verwendet werden muss.

3. Eine wiederverwendbare Datumsformatierungs-Hilfsfunktion erstellen

Extrahieren Sie gängige Datumsformatierungsmuster in eine Hilfsfunktion, die intl.formatDate umschließt, um Konsistenz in der gesamten Anwendung sicherzustellen.

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 Detailgrad auf.

4. Datumsangaben in Route-Loadern formatieren

Wenn während des Datenladens eine Datumsformatierung erforderlich ist, greifen Sie auf das Gebietsschema aus der Anfrage zu und verwenden Sie createIntl, um Datumsangaben zu formatieren, bevor Sie Loader-Daten zurückgeben.

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 auf dem Server oder während der statischen Generierung vor und reduziert so die clientseitige Arbeit.