Comment formater les dates selon la locale de l'utilisateur

Utiliser JavaScript pour afficher les dates selon les conventions régionales de chaque utilisateur

Introduction

Les dates apparaissent différemment à travers le monde. Les Américains écrivent le 15 mars 2025 comme 3/15/2025, tandis que les Européens écrivent la même date comme 15/03/2025, et les utilisateurs japonais s'attendent à 2025/3/15. Lorsque vous codez en dur un format de date, vous supposez que tous les utilisateurs suivent la même convention.

Afficher des dates dans un format non familier crée de la confusion. Un utilisateur qui voit 3/15/2025 alors qu'il s'attend à 15/03/2025 doit s'arrêter pour décoder si la date représente le 15 mars ou la date impossible du 15e mois. Cette charge cognitive se multiplie à travers chaque date dans votre application.

JavaScript fournit l'API Intl.DateTimeFormat pour gérer le formatage des dates automatiquement. Cette leçon explique pourquoi les formats de date varient selon les cultures, comment l'API fonctionne, et comment formater correctement les dates pour n'importe quelle locale.

Pourquoi les formats de date varient selon la locale

Différentes régions ont développé différentes conventions pour écrire les dates. Ces conventions reflètent des pratiques historiques, des systèmes éducatifs et des préférences culturelles. Aucun format n'est universel.

Aux États-Unis, les dates suivent le modèle mois-jour-année. Le 15 mars 2025 apparaît comme 3/15/2025.

Dans la plupart des pays européens, y compris le Royaume-Uni, l'Allemagne, la France et l'Espagne, les dates suivent le modèle jour-mois-année. La même date apparaît comme 15/03/2025.

Au Japon, en Chine et en Corée, les dates suivent le modèle année-mois-jour. La date apparaît comme 2025/3/15.

Différentes locales utilisent également différents caractères séparateurs. Les Américains utilisent des barres obliques, les Allemands utilisent des points, et certaines locales utilisent des traits d'union ou des espaces.

Les noms des mois varient également selon la langue. Mars apparaît comme "March" en anglais, "März" en allemand, "mars" en français, "marzo" en espagnol, et "3月" en japonais.

Lorsque vous affichez des dates, vous devez correspondre aux attentes de l'utilisateur tant pour l'ordre des composants que pour les conventions de formatage spécifiques.

Utilisation d'Intl.DateTimeFormat pour formater les dates

Le constructeur Intl.DateTimeFormat crée un formateur de date qui applique des conventions spécifiques à la locale. Passez un identifiant de locale comme premier argument, puis appelez la méthode format() avec un objet Date.

const formatter = new Intl.DateTimeFormat('en-US');
const date = new Date('2025-03-15');
console.log(formatter.format(date));
// Résultat : "3/15/2025"

Cela crée un formateur pour l'anglais américain, qui utilise le modèle mois-jour-année avec des barres obliques. La méthode format() convertit l'objet Date en chaîne de caractères avec le formatage approprié.

Le constructeur Date accepte une chaîne de date au format ISO 8601 comme 2025-03-15. Cela crée un objet Date représentant le 15 mars 2025 à minuit UTC. Le formateur convertit ensuite cette date en une chaîne spécifique à la locale.

Formatage de la même date pour différentes locales

Vous pouvez formater la même date pour différentes locales en changeant l'identifiant de locale passé au constructeur.

const date = new Date('2025-03-15');

const usFormatter = new Intl.DateTimeFormat('en-US');
console.log(usFormatter.format(date));
// Résultat : "3/15/2025"

const gbFormatter = new Intl.DateTimeFormat('en-GB');
console.log(gbFormatter.format(date));
// Résultat : "15/03/2025"

const deFormatter = new Intl.DateTimeFormat('de-DE');
console.log(deFormatter.format(date));
// Résultat : "15.3.2025"

const jpFormatter = new Intl.DateTimeFormat('ja-JP');
console.log(jpFormatter.format(date));
// Résultat : "2025/3/15"

Chaque formateur applique des conventions différentes. Le formateur américain utilise le modèle mois-jour-année avec des barres obliques. Le formateur britannique utilise le modèle jour-mois-année avec des barres obliques. Le formateur allemand utilise le modèle jour-mois-année avec des points. Le formateur japonais utilise le modèle année-mois-jour avec des barres obliques.

Vous n'avez pas besoin de connaître le modèle ou les séparateurs utilisés par chaque locale. L'API gère automatiquement ces détails en fonction de l'identifiant de locale.

Formatage des dates pour la locale de l'utilisateur

Au lieu de coder en dur une locale spécifique, vous pouvez utiliser la langue préférée de l'utilisateur depuis le navigateur. La propriété navigator.language renvoie la préférence linguistique principale de l'utilisateur.

const userLocale = navigator.language;
const formatter = new Intl.DateTimeFormat(userLocale);
const date = new Date('2025-03-15');

console.log(formatter.format(date));
// Le résultat varie selon la locale de l'utilisateur
// Pour en-US : "3/15/2025"
// Pour en-GB : "15/03/2025"
// Pour de-DE : "15.3.2025"
// Pour ja-JP : "2025/3/15"

Cette approche affiche les dates selon les attentes de chaque utilisateur sans leur demander de sélectionner manuellement une locale. Le navigateur fournit la préférence linguistique, et l'API Intl applique les conventions de formatage appropriées.

Vous pouvez également passer le tableau complet des langues préférées pour activer le comportement de repli.

const formatter = new Intl.DateTimeFormat(navigator.languages);
const date = new Date('2025-03-15');
console.log(formatter.format(date));

L'API utilise la première locale qu'elle prend en charge dans le tableau. Cela offre une meilleure gestion du repli lorsque la préférence principale de l'utilisateur n'est pas disponible.

Comprendre ce que l'API formate

L'API Intl.DateTimeFormat formate les objets Date de JavaScript. Un objet Date représente un moment précis dans le temps, incluant la date, l'heure et les informations de fuseau horaire.

Lorsque vous formatez un objet Date, l'API le convertit en chaîne de caractères selon les conventions de la locale. Par défaut, l'API formate uniquement la partie date et omet l'heure.

const formatter = new Intl.DateTimeFormat('en-US');

const dateWithTime = new Date('2025-03-15T14:30:00');
console.log(formatter.format(dateWithTime));
// Résultat : "3/15/2025"

L'objet Date inclut des informations d'heure, mais le formateur par défaut les ignore. Les leçons suivantes couvriront comment formater à la fois les dates et les heures ensemble, ou les heures seules.

Créer des dates à formater

Vous pouvez créer des objets Date de plusieurs façons. L'approche la plus fiable est d'utiliser des chaînes de date au format ISO 8601.

const date1 = new Date('2025-03-15');
const date2 = new Date('2025-12-31');
const date3 = new Date('2025-01-01');

const formatter = new Intl.DateTimeFormat('en-US');

console.log(formatter.format(date1));
// Résultat : "3/15/2025"

console.log(formatter.format(date2));
// Résultat : "12/31/2025"

console.log(formatter.format(date3));
// Résultat : "1/1/2025"

Les chaînes ISO 8601 utilisent le format YYYY-MM-DD. Ce format est sans ambiguïté et fonctionne de manière cohérente dans toutes les locales et fuseaux horaires.

Formater des dates à partir de timestamps

Vous pouvez également créer des objets Date à partir de timestamps Unix. Un timestamp Unix représente le nombre de millisecondes écoulées depuis le 1er janvier 1970 UTC.

const timestamp = 1710489600000; // 15 mars 2025
const date = new Date(timestamp);

const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date));
// Résultat : "3/15/2025"

Cette approche fonctionne lorsque vous recevez des timestamps d'APIs, de bases de données ou d'autres systèmes qui représentent les dates sous forme de nombres.

Vous pouvez également passer le timestamp directement à la méthode format() sans créer d'abord un objet Date.

const formatter = new Intl.DateTimeFormat('en-US');
const timestamp = 1710489600000;

console.log(formatter.format(timestamp));
// Résultat : "3/15/2025"

L'API accepte à la fois les objets Date et les timestamps. Utilisez l'approche qui convient le mieux à votre code.

Formatage de la date actuelle

Pour formater la date actuelle, créez un objet Date sans arguments. Cela crée un objet Date représentant le moment présent.

const formatter = new Intl.DateTimeFormat('en-US');
const now = new Date();

console.log(formatter.format(now));
// Résultat : "10/15/2025" (ou la date actuelle lors de l'exécution)

Vous pouvez également passer directement Date.now(), qui renvoie le timestamp actuel sous forme de nombre.

const formatter = new Intl.DateTimeFormat('en-US');

console.log(formatter.format(Date.now()));
// Résultat : "10/15/2025" (ou la date actuelle lors de l'exécution)

Les deux approches produisent des résultats identiques.

Réutilisation des formateurs pour la performance

La création d'une nouvelle instance Intl.DateTimeFormat implique le chargement des données de locale et le traitement des options. Lorsque vous devez formater plusieurs dates avec les mêmes paramètres de locale et de configuration, créez le formateur une seule fois et réutilisez-le.

const formatter = new Intl.DateTimeFormat('en-US');

const dates = [
  new Date('2025-01-01'),
  new Date('2025-06-15'),
  new Date('2025-12-31')
];

dates.forEach(date => {
  console.log(formatter.format(date));
});
// Résultat :
// "1/1/2025"
// "6/15/2025"
// "12/31/2025"

Cette approche est plus efficace que de créer un nouveau formateur pour chaque date. La différence de performance devient significative lors du formatage de tableaux contenant des centaines ou des milliers de dates.

Formatage des dates dans les templates

Vous pouvez utiliser Intl.DateTimeFormat partout où vous affichez des dates aux utilisateurs. Cela inclut l'insertion de dates formatées dans des templates HTML, l'affichage de dates dans des tableaux ou la présentation d'horodatages dans des interfaces utilisateur.

const formatter = new Intl.DateTimeFormat(navigator.language);

const publishedDate = new Date('2025-03-15');
const updatedDate = new Date('2025-04-20');

document.getElementById('published').textContent = formatter.format(publishedDate);
document.getElementById('updated').textContent = formatter.format(updatedDate);

Les chaînes formatées fonctionnent comme n'importe quelle autre valeur de chaîne. Vous pouvez les insérer dans du contenu textuel, des attributs ou tout autre contexte où vous affichez des informations aux utilisateurs.