Comment formater les dates selon la locale de l'utilisateur

Introduction

Les dates s'affichent différemment dans 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 inhabituel crée de la confusion. Un utilisateur qui voit 3/15/2025 alors qu'il s'attend à 15/03/2025 doit faire une pause pour décoder si la date représente le 15 mars ou la date impossible du 15e mois. Cette charge cognitive se multiplie pour 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 les pratiques historiques, les systèmes éducatifs et les préférences culturelles. Aucun format unique 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 de séparation. 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 de 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 répondre aux attentes de l'utilisateur concernant à la fois l'ordre des composants et les conventions de formatage spécifiques.

Utiliser Intl.DateTimeFormat pour formater les dates

Le constructeur Intl.DateTimeFormat crée un formateur de date qui applique les 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));
// Output: "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 avec le formatage approprié.

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

Formater la même date pour différentes locales

Vous pouvez formater la même date pour différentes locales en modifiant 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));
// Output: "3/15/2025"

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

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

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

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

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

Formater les 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));
// Output varies by user's locale
// For en-US: "3/15/2025"
// For en-GB: "15/03/2025"
// For de-DE: "15.3.2025"
// For ja-JP: "2025/3/15"

Cette approche affiche les dates selon les attentes de chaque utilisateur sans qu'il soit nécessaire 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 l'ensemble du tableau 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 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 omets l'heure.

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

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

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

Créer des dates à formater

Vous pouvez créer des objets Date de plusieurs manières. L'approche la plus fiable consiste à utiliser des chaînes de date 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));
// Output: "3/15/2025"

console.log(formatter.format(date2));
// Output: "12/31/2025"

console.log(formatter.format(date3));
// Output: "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 depuis le 1er janvier 1970 UTC.

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

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

Cette approche fonctionne lorsque vous recevez des timestamps provenant d'API, 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'objet Date au préalable.

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

console.log(formatter.format(timestamp));
// Output: "3/15/2025"

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

Formater la date actuelle

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

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

console.log(formatter.format(now));
// Output: "10/15/2025" (or current date when run)

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

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

console.log(formatter.format(Date.now()));
// Output: "10/15/2025" (or current date when run)

Les deux approches produisent des résultats identiques.

Réutiliser les formateurs pour améliorer les performances

Créer une nouvelle instance de Intl.DateTimeFormat implique le chargement des données de locale et le traitement des options. Lorsque vous devez formater plusieurs dates avec la même locale et les mêmes paramètres, 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));
});
// Output:
// "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.

Formater les 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 de timestamps 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.