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 10 octobre aux États-Unis mais 10 décembre au Royaume-Uni. Écrire "12 oct. 2025" présuppose l'utilisation des noms de mois en anglais et une convention d'ordre spécifique. Chaque région a ses propres attentes concernant le format de date, y compris l'ordre du jour, du mois et de l'année, le choix des séparateurs, et si les noms des mois sont écrits en entier ou abrégés. Lorsqu'une application affiche des dates dans un format fixe unique, cela semble étranger et déroutant pour les utilisateurs dans 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 discordante pour un autre. Sans formatage adapté à la locale, les dates deviennent une source de friction qui nuit à l'expérience utilisateur et donne à l'application une apparence moins professionnelle.

Solution

Formatez les dates en fonction de la locale de l'utilisateur en convertissant les valeurs de date en chaînes qui suivent les conventions régionales pour l'ordre, les séparateurs et les noms des mois. React-intl fournit des fonctions de formatage et des composants qui utilisent les API d'internationalisation intégrées au 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 avoir à 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 une chaîne 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 l'IntlProvider situé 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 des dates numériques courtes ou des 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>Publié le : {shortDate}</p>
      <p>Date complète : {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

Rendez 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>Commande passée le</h2>
      <FormattedDate
        value={orderDate}
        year="numeric"
        month="long"
        day="numeric"
      />
    </div>
  );
}

Le composant FormattedDate rend 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 des informations temporelles

Incluez les composants temporels 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>
        Programmé pour:{" "}
        {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 horaire de 12 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.