Datumsformate für verschiedene Locales in TanStack Start v1 formatieren

Problem

Datumsangaben haben kein universelles Anzeigeformat. Die Sequenz 10/12/2025 bedeutet in den Vereinigten Staaten den 12. Oktober, im Vereinigten Königreich jedoch den 10. Dezember. Die Schreibweise „Oct 12, 2025" setzt englische Monatsnamen und eine bestimmte Reihenfolgekonvention voraus. Jede Region hat ihre eigenen Erwartungen an das Datumsformat, einschließlich der Reihenfolge von Tag, Monat und Jahr, der Wahl der Trennzeichen und ob Monatsnamen ausgeschrieben oder abgekürzt werden. Wenn eine Anwendung Datumsangaben in einem einzigen festen Format anzeigt, wirkt dies für Nutzer in den meisten Regionen fremd und verwirrend.

Nutzer erwarten, dass Datumsangaben in dem Format erscheinen, das sie gelernt haben und täglich verwenden. Ein Datum, das für eine Zielgruppe natürlich aussieht, kann für eine andere mehrdeutig oder irritierend sein. Ohne locale-bewusste Formatierung werden Datumsangaben zu einer Reibungsquelle, die das Nutzererlebnis beeinträchtigt und die Anwendung weniger professionell wirken lässt.

Lösung

Formatieren Sie Datumsangaben basierend auf dem Locale des Nutzers, indem Sie Datumswerte in Strings konvertieren, die regionalen Konventionen für Reihenfolge, Trennzeichen und Monatsnamen folgen. React-intl bietet Formatierungsfunktionen und Komponenten, die die integrierten Internationalisierungs-APIs des Browsers nutzen, um automatisch die korrekten Regeln für jedes Locale anzuwenden. Durch Übergabe eines Datumswerts und optionaler Formatierungsoptionen an diese Tools erzeugt die Anwendung eine Ausgabe, die sowohl klar als auch natürlich für die Sprache und Region des Nutzers ist.

Dieser Ansatz stellt sicher, dass Datumsangaben korrekt angezeigt werden, ohne manuell Formatierungslogik für jedes Locale implementieren zu müssen. Die Formatierung passt sich dem Locale des Nutzers an, macht Datumsangaben sofort erkennbar und reduziert die kognitive Belastung.

Schritte

1. Erstellen Sie eine Komponente, die Datumsangaben mit dem useIntl-Hook formatiert

Verwenden Sie den useIntl-Hook, um auf die formatDate-Methode zuzugreifen, die einen Datumswert in eine sprachabhängige Zeichenkette konvertiert.

import { useIntl } from "react-intl";

export function EventDate({ date }: { date: Date }) {
  const intl = useIntl();

  return (
    <time dateTime={date.toISOString()}>
      {intl.formatDate(date, {
        year: "numeric",
        month: "long",
        day: "numeric",
      })}
    </time>
  );
}

Die formatDate-Methode wendet die Konventionen der Locale für die Datumsdarstellung an. Das Options-Objekt steuert, welche Teile des Datums angezeigt werden und wie detailliert sie dargestellt werden. Die formatierte Zeichenkette passt sich an die Locale an, die vom IntlProvider weiter oben im Komponentenbaum bereitgestellt wird.

2. Formatieren Sie Datumsangaben mit spezifischen Stilen unter Verwendung vordefinierter Optionen

Übergeben Sie verschiedene Optionskombinationen, um den Datumsformatstil zu steuern, z. B. kurze numerische Datumsangaben oder lange beschreibende Datumsangaben.

import { useIntl } from "react-intl";

export function ArticleMetadata({ publishedAt }: { publishedAt: Date }) {
  const intl = useIntl();

  const shortDate = intl.formatDate(publishedAt, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });

  const longDate = intl.formatDate(publishedAt, {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  });

  return (
    <div>
      <p>Published: {shortDate}</p>
      <p>Full date: {longDate}</p>
    </div>
  );
}

Die month-Option akzeptiert Werte wie numeric, 2-digit, short, long und narrow. Die weekday-Option fügt den Wochentag hinzu. Jede Locale interpretiert diese Optionen gemäß ihren eigenen Konventionen, um sicherzustellen, dass die Ausgabe den Erwartungen der Benutzer entspricht.

3. Verwenden Sie die FormattedDate-Komponente für deklarative Formatierung

Rendern Sie Datumsangaben deklarativ mit der FormattedDate-Komponente, die dieselben Formatierungsoptionen wie die formatDate-Methode akzeptiert.

import { FormattedDate } from "react-intl";

export function OrderSummary({ orderDate }: { orderDate: Date }) {
  return (
    <div>
      <h2>Order placed on</h2>
      <FormattedDate
        value={orderDate}
        year="numeric"
        month="long"
        day="numeric"
      />
    </div>
  );
}

Die FormattedDate-Komponente rendert das formatierte Datum standardmäßig als React-Fragment. Sie verwendet die Locale aus dem IntlProvider-Kontext und wendet dieselben Formatierungsregeln wie die imperative API an. Dieser Ansatz funktioniert gut, wenn das formatierte Datum der einzige Inhalt ist, der in diesem Teil des Komponentenbaums benötigt wird.

4. Datumsangaben mit Zeitinformationen formatieren

Fügen Sie Zeitkomponenten hinzu, indem Sie Stunden- und Minutenoptionen ergänzen, um sowohl Datum als auch Uhrzeit in einer einzigen formatierten Zeichenkette anzuzeigen.

import { useIntl } from "react-intl";

export function AppointmentCard({ scheduledAt }: { scheduledAt: Date }) {
  const intl = useIntl();

  return (
    <div>
      <p>
        Scheduled for:{" "}
        {intl.formatDate(scheduledAt, {
          year: "numeric",
          month: "short",
          day: "numeric",
          hour: "numeric",
          minute: "2-digit",
        })}
      </p>
    </div>
  );
}

Durch Hinzufügen der Optionen hour und minute wird eine kombinierte Datums- und Uhrzeitzeichenkette erzeugt. Das Gebietsschema bestimmt, ob das 12-Stunden- oder 24-Stunden-Zeitformat verwendet wird und wie die Datums- und Zeitteile getrennt werden. Dies gewährleistet eine konsistente Formatierung entsprechend den regionalen Erwartungen für die Anzeige von Zeitstempeln.