Comment formater les dates selon différentes locales dans React Router v7

Problème

Les dates n'ont pas toutes un format écrit universel. La séquence numérique 10/12/2025 correspond au 12 octobre aux États-Unis, mais au 10 décembre au Royaume-Uni. Même les formats comme "12 oct. 2025" supposent des noms de mois en anglais et un ordre particulier, ce qui peut ne pas correspondre aux attentes des utilisateurs. Lorsqu'une application affiche les dates dans un format unique et fixe, cela peut sembler étrange pour les utilisateurs de régions ayant d'autres conventions, ce qui nuit à la clarté et à la confiance.

Chaque locale suit ses propres règles pour présenter les dates : ordre du jour, du mois et de l'année, choix des séparateurs ou encore écriture des noms de mois en entier ou en abrégé. Ne pas tenir compte de ces conventions oblige les utilisateurs à « traduire » mentalement les dates dans leur propre format, ce qui augmente la charge cognitive et le risque d'erreurs d'interprétation.

Solution

Formatez les valeurs de date selon la locale de l'utilisateur en confiant la logique d'affichage à des API d'internationalisation qui connaissent les conventions régionales. Plutôt que de construire manuellement des chaînes de caractères, transmettez des objets date à des fonctions ou composants de formatage qui appliquent l'ordre, les séparateurs et les noms de mois corrects pour la locale active.

React-intl propose à la fois des composants déclaratifs et des méthodes impératives qui acceptent les options standards de formatage de date et produisent des chaînes adaptées à la locale. En choisissant quelles parties de la date afficher et leur niveau de détail, vous contrôlez le style du résultat tout en laissant la bibliothèque gérer les différences régionales. Cette approche permet de séparer la logique de formatage du code d'affichage, et garantit la cohérence dans toute l'application.

Étapes

1. Formater les dates dans les composants avec FormattedDate

Utilisez le composant FormattedDate de react-intl pour afficher les dates avec un format adapté à la locale. Ce composant accepte une valeur de date et des options de formatage correspondant à Intl.DateTimeFormatOptions.

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

Le composant FormattedDate utilise les API formatDate et Intl.DateTimeFormat pour produire une chaîne adaptée à la locale fournie par le IntlProvider environnant. Les options year, month et day contrôlent les éléments affichés et leur format.

2. Formater les dates impérativement avec useIntl

Utilisez le hook useIntl pour accéder à la méthode formatDate lorsque vous avez besoin d'une date formatée dans des contextes non rendus, comme des attributs, labels aria ou transformations de données.

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

La fonction formatDate accepte une valeur de date et éventuellement Intl.DateTimeFormatOptions, puis renvoie une chaîne formatée selon la locale. Cela est utile lorsque la date formatée doit être insérée dans une autre chaîne ou utilisée comme valeur de prop.

3. Créer un utilitaire de formatage de date réutilisable

Regroupez les formats de date courants dans une fonction utilitaire qui encapsule intl.formatDate afin d'assurer la cohérence dans toute l'application.

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

Ce hook centralise la logique de formatage et facilite l'application de styles de date cohérents dans toute l'application. Les composants appellent la méthode appropriée selon le niveau de détail souhaité.

4. Formater les dates dans les loaders de route

Si vous devez formater une date lors du chargement des données, récupérez la locale depuis la requête et utilisez createIntl pour formater les dates avant de retourner les données du loader.

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

La fonction createIntl crée un objet intl permettant de formater les dates en dehors des composants React. Cette méthode permet de pré-formater les dates côté serveur ou lors de la génération statique, ce qui réduit le travail côté client.