Comment formater les heures selon les paramètres régionaux de l'utilisateur

Introduction

Les heures s'affichent différemment dans le monde. Les Américains voient généralement 3:30 PM affiché comme 3:30 PM, tandis que la plupart des Européens s'attendent à 15:30. Lorsque vous codez en dur un format d'heure, vous supposez que tous les utilisateurs suivent la même convention.

Afficher les heures dans un format inhabituel crée de la confusion. Un utilisateur habitué au format 24 heures qui voit 3:30 PM doit le convertir mentalement pour comprendre s'il s'agit du matin ou de l'après-midi. Cette charge cognitive se multiplie pour chaque heure dans votre application.

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

Pourquoi les formats d'heure varient selon les paramètres régionaux

Différentes régions ont développé différentes conventions pour afficher les heures. 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, au Canada, en Australie et aux Philippines, les heures utilisent le format 12 heures avec des indicateurs AM et PM. 3:30 de l'après-midi apparaît comme 3:30 PM.

Dans la plupart des pays européens, en Amérique latine et en Asie, les heures utilisent le format 24 heures sans indicateurs AM ou PM. La même heure apparaît comme 15:30.

Le caractère de séparation entre les heures et les minutes varie également. Les pays anglophones utilisent des deux-points, tandis que certaines locales utilisent des points ou d'autres signes de ponctuation.

La façon dont AM et PM apparaissent diffère également. L'anglais utilise AM et PM, l'espagnol utilise a.m. et p.m., et certaines locales placent ces indicateurs avant l'heure plutôt qu'après.

Lorsque vous affichez des heures, vous devez répondre aux attentes de l'utilisateur concernant à la fois le format horaire et les conventions de formatage spécifiques.

Utiliser Intl.DateTimeFormat pour formater les heures

Le constructeur Intl.DateTimeFormat crée un formateur qui applique des conventions spécifiques à la locale. Pour formater les heures, passez un identifiant de locale comme premier argument et spécifiez les options liées au temps dans le second argument.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});

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

Cela crée un formateur pour l'anglais américain qui affiche les heures et les minutes. Les options hour et minute indiquent au formateur d'inclure ces composants. La méthode format() convertit l'objet Date en chaîne avec le formatage approprié.

Le constructeur Date accepte une chaîne datetime ISO 8601 comme 2025-03-15T15:30:00. Cela crée un objet Date représentant 15h30 le 15 mars 2025. Le formateur convertit ensuite cela en chaîne horaire spécifique à la locale.

Formater la même heure pour différentes locales

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

const date = new Date('2025-03-15T15:30:00');

const usFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(usFormatter.format(date));
// Output: "3:30 PM"

const gbFormatter = new Intl.DateTimeFormat('en-GB', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(gbFormatter.format(date));
// Output: "15:30"

const deFormatter = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(deFormatter.format(date));
// Output: "15:30"

const frFormatter = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(frFormatter.format(date));
// Output: "15:30"

Chaque formateur applique des conventions différentes. Le formateur américain utilise le format 12 heures avec AM/PM. Les formateurs britannique, allemand et français utilisent tous le format 24 heures sans indicateurs AM/PM.

Vous n'avez pas besoin de savoir quel format utilise chaque locale. L'API gère ces détails automatiquement en fonction de l'identifiant de locale.

Inclure les secondes dans l'affichage de l'heure

Vous pouvez ajouter l'option second pour afficher les secondes avec les heures et les minutes.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

const date = new Date('2025-03-15T15:30:45');
console.log(formatter.format(date));
// Output: "3:30:45 PM"

L'option second fonctionne de la même manière que hour et minute. Définissez-la sur 'numeric' pour inclure les secondes dans la sortie.

Contrôler le remplissage des chiffres avec 2-digit

Les options hour, minute et second acceptent deux valeurs : 'numeric' et '2-digit'. La valeur 'numeric' affiche les chiffres sans remplissage, tandis que '2-digit' affiche toujours deux chiffres avec des zéros en tête.

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

const numericFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});
console.log(numericFormatter.format(date));
// Output: "9:05:03 AM"

const twoDigitFormatter = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});
console.log(twoDigitFormatter.format(date));
// Output: "09:05:03 AM"

Le formateur numérique affiche 9:05:03 AM avec un seul chiffre pour l'heure. Le formateur à deux chiffres affiche 09:05:03 AM avec un zéro en tête pour l'heure. Les deux affichent deux chiffres pour les minutes et les secondes car ces valeurs sont généralement complétées quel que soit le paramètre.

Forcer le format 12 heures ou 24 heures

Par défaut, l'API utilise le format horaire préféré par la locale. Vous pouvez remplacer cela avec l'option hour12.

const date = new Date('2025-03-15T15:30:00');

const hour12Formatter = new Intl.DateTimeFormat('en-GB', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
});
console.log(hour12Formatter.format(date));
// Output: "3:30 pm"

const hour24Formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});
console.log(hour24Formatter.format(date));
// Output: "15:30"

Définir hour12: true force le format 12 heures même pour les locales qui utilisent normalement le format 24 heures. Définir hour12: false force le format 24 heures même pour les locales qui utilisent normalement le format 12 heures.

La locale détermine toujours d'autres détails de formatage comme la ponctuation et l'espacement. Le formateur britannique avec hour12: true affiche 3:30 pm avec pm en minuscules, tandis qu'un formateur américain afficherait 3:30 PM avec PM en majuscules.

Formater les heures 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, {
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-03-15T15:30:00');
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "3:30 PM"
// For en-GB: "15:30"
// For de-DE: "15:30"
// For fr-FR: "15:30"

Cette approche affiche les heures selon les attentes de chaque utilisateur sans nécessiter qu'ils sélectionnent 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 de langues préférées pour activer le comportement de repli.

const formatter = new Intl.DateTimeFormat(navigator.languages, {
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-03-15T15:30:00');
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.

Créer des heures à formater

Vous pouvez créer des objets Date avec des informations temporelles de plusieurs manières. L'approche la plus fiable consiste à utiliser des chaînes datetime ISO 8601.

const time1 = new Date('2025-03-15T09:00:00');
const time2 = new Date('2025-03-15T15:30:00');
const time3 = new Date('2025-03-15T23:45:30');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});

console.log(formatter.format(time1));
// Output: "9:00 AM"

console.log(formatter.format(time2));
// Output: "3:30 PM"

console.log(formatter.format(time3));
// Output: "11:45 PM"

Les chaînes datetime ISO 8601 utilisent le format YYYY-MM-DDTHH:MM:SS. Le T sépare la date de l'heure. Ce format est sans ambiguïté et fonctionne de manière cohérente dans toutes les locales et fuseaux horaires.

Formater les heures à 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 = 1710515400000; // March 15, 2025 at 3:30 PM
const date = new Date(timestamp);

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(formatter.format(date));
// Output: "3:30 PM"

Cette approche fonctionne lorsque vous recevez des timestamps d'API, de bases de données ou d'autres systèmes qui représentent les heures 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', {
  hour: 'numeric',
  minute: 'numeric'
});

const timestamp = 1710515400000;
console.log(formatter.format(timestamp));
// Output: "3:30 PM"

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

Formater l'heure actuelle

Pour formater l'heure 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', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

const now = new Date();
console.log(formatter.format(now));
// Output: "3:45:12 PM" (or current time 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', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

console.log(formatter.format(Date.now()));
// Output: "3:45:12 PM" (or current time when run)

Les deux approches produisent des résultats identiques.

Réutiliser les formateurs pour les performances

Créer une nouvelle instance Intl.DateTimeFormat implique le chargement des données de locale et le traitement des options. Lorsque vous devez formater plusieurs heures avec la même locale et les mêmes paramètres, créez le formateur une fois et réutilisez-le.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});

const times = [
  new Date('2025-03-15T09:00:00'),
  new Date('2025-03-15T12:30:00'),
  new Date('2025-03-15T18:45:00')
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// Output:
// "9:00 AM"
// "12:30 PM"
// "6:45 PM"

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

Formatage des heures dans les modèles

Vous pouvez utiliser Intl.DateTimeFormat partout où vous affichez des heures aux utilisateurs. Cela inclut l'insertion d'heures formatées dans des modèles HTML, l'affichage d'heures dans des tableaux ou l'affichage d'horodatages dans les interfaces utilisateur.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric'
});

const eventStart = new Date('2025-03-15T14:00:00');
const eventEnd = new Date('2025-03-15T16:30:00');

document.getElementById('start-time').textContent = formatter.format(eventStart);
document.getElementById('end-time').textContent = formatter.format(eventEnd);

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.