Formatage des dates et heures

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 seul format (par exemple, « Oct 12, 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, en gérant l'ordre, les séparateurs et les noms de mois.

Étapes

1. Créer un composant client pour une date

Étant donné que les composants react-intl nécessitent un IntlProvider, ils doivent être utilisés dans des composants clients.

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>
      Posted on:
      <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 les 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 ». Les autres options incluent « full », « medium » et « short ».
• timeStyle="short" demande un format comme « 15:00 ».

3. Utiliser le composant sur une page

Vous pouvez maintenant 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() {
  // This could come from a database or API
  const myPostDate = new Date('2025-12-10T15:00:00Z');

  return (
    <div>
      <h1>My blog post</h1>
      <PostDetails publishDate={myPostDate} />
      <p>This is the content of the post...</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".