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

Problème

Les dates n'ont pas de format écrit universel. La séquence numérique 10/12/2025 signifie le 10 décembre aux États-Unis mais le 12 octobre au Royaume-Uni. Même des formats comme "Oct 12, 2025" supposent des noms de mois en anglais et une convention d'ordre spécifique qui peut ne pas correspondre aux attentes des utilisateurs. Lorsqu'une application affiche des dates dans un format fixe unique, cela semble étranger aux utilisateurs dans les régions qui suivent des conventions différentes, réduisant la clarté et la confiance.

Différentes locales ont des règles distinctes pour la présentation des dates, 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. Ignorer ces conventions force les utilisateurs à traduire mentalement les dates dans leur format familier, augmentant la charge cognitive et le risque de mauvaise interprétation.

Solution

Formatez les valeurs de date selon la locale de l'utilisateur en déléguant la logique de présentation aux API d'internationalisation qui comprennent les conventions régionales. Au lieu de construire manuellement des chaînes de date, transmettez des objets de 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 fournit à la fois des composants déclaratifs et des méthodes impératives qui acceptent des options de formatage de date standard et produisent des chaînes adaptées à la locale. En spécifiant quelles parties de la date inclure et leur niveau de détail, vous contrôlez le style de sortie tandis que la bibliothèque gère les variations régionales. Cette approche maintient la logique de formatage de date séparée des composants d'affichage et assure 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 rendre les dates avec un formatage spécifique à la locale. Le composant accepte une valeur de date et des options de formatage qui correspondent à 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 qui correspond à la locale fournie par l'IntlProvider environnant. Les options year, month et day contrôlent quelles parties apparaissent et leur format.

2. Formater les dates de manière impérative avec useIntl

Utilisez le hook useIntl pour accéder à la méthode formatDate lorsque vous avez besoin d'une chaîne de date formatée pour des contextes non rendus tels que les attributs, les labels aria ou les 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 des options Intl.DateTimeFormatOptions facultatives et renvoie une chaîne formatée selon la locale. Cela est utile lorsque la date formatée doit être intégrée dans une autre chaîne ou utilisée comme valeur de prop.

3. Créer un helper réutilisable pour le formatage des dates

Extrayez les modèles de formatage de date courants dans une fonction helper qui encapsule intl.formatDate pour 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 en fonction du niveau de détail souhaité.

4. Formater les dates dans les loaders de routes

Lorsque le formatage de date est nécessaire pendant le chargement des données, accédez à 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 qui peut formater les dates en dehors des composants React. Cette approche préformate les dates sur le serveur ou pendant la génération statique, réduisant ainsi le travail côté client.