Comment formater les dates pour différentes locales dans TanStack Start v1

Problème

Les dates n'ont pas de format d'affichage universel. La séquence 10/12/2025 signifie le 12 octobre aux États-Unis mais le 10 décembre au Royaume-Uni. Écrire « Oct 12, 2025 » suppose des noms de mois en anglais et une convention d'ordre spécifique. Chaque région a ses propres attentes en matière de format de date, notamment l'ordre du jour, du mois et de l'année, le choix des séparateurs et si les noms de mois sont écrits en entier ou abrégés. Lorsqu'une application affiche les dates dans un seul format fixe, cela semble étranger et déroutant pour les utilisateurs de la plupart des régions.

Les utilisateurs s'attendent à ce que les dates apparaissent dans le format qu'ils ont appris et utilisent quotidiennement. Une date qui semble naturelle pour un public peut être ambiguë ou déconcertante pour un autre. Sans formatage tenant compte de la locale, les dates deviennent une source de friction qui nuit à l'expérience utilisateur et donne à l'application un aspect moins professionnel.

Solution

Formatez les dates en fonction de la locale de l'utilisateur en convertissant les valeurs de date en chaînes de caractères qui suivent les conventions régionales pour l'ordre, les séparateurs et les noms de mois. React-intl fournit des fonctions de formatage et des composants qui utilisent les API d'internationalisation intégrées du navigateur pour appliquer automatiquement les règles correctes pour chaque locale. En transmettant une valeur de date et des options de formatage facultatives à ces outils, l'application produit un résultat à la fois clair et naturel pour la langue et la région de l'utilisateur.

Cette approche garantit que les dates sont affichées correctement sans implémenter manuellement une logique de formatage pour chaque locale. Le formatage s'adapte à la locale de l'utilisateur, rendant les dates immédiatement reconnaissables et réduisant la charge cognitive.

Étapes

1. Créer un composant qui formate les dates avec le hook useIntl

Utilisez le hook useIntl pour accéder à la méthode formatDate, qui convertit une valeur de date en chaîne de caractères adaptée à la locale.

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>
  );
}

La méthode formatDate applique les conventions de la locale pour l'affichage des dates. L'objet options contrôle quelles parties de la date apparaissent et leur niveau de détail. La chaîne formatée s'adapte à la locale fournie par le IntlProvider plus haut dans l'arborescence des composants.

2. Formater les dates avec des styles spécifiques en utilisant des options prédéfinies

Passez différentes combinaisons d'options pour contrôler le style de format de date, comme les dates numériques courtes ou les dates descriptives longues.

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>
  );
}

L'option month accepte des valeurs comme numeric, 2-digit, short, long et narrow. L'option weekday ajoute le jour de la semaine. Chaque locale interprète ces options selon ses propres conventions, garantissant que le résultat correspond aux attentes des utilisateurs.

3. Utiliser le composant FormattedDate pour un formatage déclaratif

Affichez les dates de manière déclarative en utilisant le composant FormattedDate, qui accepte les mêmes options de formatage que la méthode formatDate.

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>
  );
}

Le composant FormattedDate affiche la date formatée sous forme de fragment React par défaut. Il utilise la locale du contexte IntlProvider et applique les mêmes règles de formatage que l'API impérative. Cette approche fonctionne bien lorsque la date formatée est le seul contenu nécessaire dans cette partie de l'arborescence des composants.

4. Formater les dates avec l'heure

Incluez les composants horaires en ajoutant les options d'heure et de minute pour afficher à la fois la date et l'heure dans une seule chaîne formatée.

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>
  );
}

L'ajout des options hour et minute produit une chaîne combinant date et heure. La locale détermine s'il faut utiliser le format 12 heures ou 24 heures et comment séparer les parties date et heure. Cela maintient le formatage cohérent avec les attentes régionales pour l'affichage des horodatages.