Formatage des dates et heures

Affichage des dates localisées au lieu de nombres ambigus

Problème

Afficher une date brute, comme 10/12/2025, est ambigu. Un utilisateur aux États-Unis la voit comme le 12 octobre, tandis qu'un utilisateur au Royaume-Uni la voit comme le 10 décembre. Coder en dur un format unique (par exemple, '12 oct. 2025') crée une expérience qui semble peu naturelle ou illisible pour les utilisateurs de différentes régions.

Solution

Utilisez un composant de formatage dédié d'une bibliothèque comme react-intl. Un composant tel que FormattedDate lit automatiquement la langue actuelle depuis son fournisseur. Il formate un objet Date en une chaîne correcte et lisible selon les règles linguistiques de l'utilisateur, gérant l'ordre, les séparateurs et les noms des mois.

Étapes

1. Créer un composant client pour une date

Puisque les composants react-intl nécessitent un IntlProvider, ils doivent être utilisés dans des composants client.

Créez un nouveau composant, app/components/PostDetails.tsx, qui affichera une date formatée.

// app/components/PostDetails.tsx
'use client';

import { FormattedDate } from 'react-intl';

type Props = {
  publishDate: Date;
};

export default function PostDetails({ publishDate }: Props) {
  return (
    <div>
      Publié le :
      <FormattedDate
        value={publishDate}
        dateStyle="long"
        timeStyle="short"
      />
    </div>
  );
}

Ce composant accepte un objet Date comme prop. Il utilise ensuite FormattedDate pour le rendre.

2. Passer des options de formatage

Le composant FormattedDate accepte des options pour contrôler la sortie. Dans l'exemple ci-dessus :

  • value est l'objet Date à formater.
  • dateStyle="long" demande un format comme "10 décembre 2025". D'autres options incluent "full", "medium" et "short".
  • timeStyle="short" demande un format comme "15:00".

3. Utiliser le composant sur une page

Maintenant, vous pouvez utiliser votre nouveau composant sur n'importe quelle page, comme votre page d'accueil.

// app/[lang]/page.tsx
import PostDetails from '@/app/components/PostDetails';

export default function Home() {
  // Ceci pourrait provenir d'une base de données ou d'une API
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>Mon article de blog</h1>
      <PostDetails publishDate={myPostDate} />
      <p>Voici le contenu de l'article...</p>
    </div>
  );
}

Un utilisateur visitant /en verra "Posted on: December 10, 2025 at 3:00 PM". Un utilisateur visitant /es verra "Posted on: 10 de diciembre de 2025, 15:00".