Wie man Datumsangaben für verschiedene Locales in TanStack Start v1 formatiert

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 Anordnungskonvention 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 Benutzer in den meisten Regionen fremd und verwirrend.

Benutzer erwarten, dass Datumsangaben in dem Format erscheinen, das sie gelernt haben und täglich verwenden. Ein Datum, das für ein Publikum natürlich aussieht, kann für ein anderes mehrdeutig oder störend sein. Ohne lokalisierungsbewusste Formatierung werden Datumsangaben zu einer Quelle von Reibung, die die Benutzererfahrung beeinträchtigt und die Anwendung weniger professionell erscheinen lässt.

Lösung

Formatieren Sie Datumsangaben basierend auf dem Gebietsschema des Benutzers, indem Sie Datumswerte in Zeichenketten umwandeln, die regionalen Konventionen für Reihenfolge, Trennzeichen und Monatsnamen folgen. React-intl bietet Formatierungsfunktionen und Komponenten, die die integrierten Internationalisierungs-APIs des Browsers verwenden, um die korrekten Regeln für jedes Gebietsschema automatisch anzuwenden. Durch die Ü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 Benutzers ist.

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

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 einen sprachspezifischen String umwandelt.

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 Sprache für die Datumsanzeige an. Das Options-Objekt steuert, welche Teile des Datums erscheinen und mit welchem Detailgrad. Die formatierte Zeichenfolge passt sich der Sprache an, die vom IntlProvider höher in der Komponentenstruktur bereitgestellt wird.

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

Übergeben Sie verschiedene Optionskombinationen, um den Datumsformat-Stil zu steuern, wie 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>Veröffentlicht: {shortDate}</p>
      <p>Vollständiges Datum: {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 Sprache interpretiert diese Optionen gemäß ihren eigenen Konventionen, wodurch sichergestellt wird, 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>Bestellung aufgegeben am</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 Sprache 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 der Komponentenstruktur benötigt wird.

4. Formatieren von Datumsangaben mit Zeitinformationen

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

import { useIntl } from "react-intl";

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

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

Das Hinzufügen der Optionen hour und minute erzeugt einen kombinierten Datums- und Uhrzeitstring. Die Locale bestimmt, ob das 12-Stunden- oder 24-Stunden-Zeitformat verwendet wird und wie die Datums- und Zeitteile getrennt werden. Dies sorgt dafür, dass die Formatierung den regionalen Erwartungen für die Anzeige von Zeitstempeln entspricht.