Comment basculer entre le format 12 heures et 24 heures
Utilisez JavaScript pour afficher les heures avec AM/PM ou au format 24 heures selon les préférences des utilisateurs
Introduction
L'heure apparaît différemment à travers le monde. Les Américains voient généralement 2:30 PM, tandis que les Allemands voient 14:30, et les deux représentent le même moment. Lorsque vous affichez l'heure dans un seul format, vous supposez que tous les utilisateurs suivent la même convention.
Afficher l'heure dans un format non familier crée de la friction. Un utilisateur qui s'attend à voir 14:30 mais voit 2:30 PM doit convertir mentalement l'heure. Un utilisateur qui s'attend à voir 2:30 PM mais voit 14:30 fait face au même problème. Cette charge cognitive se répète pour chaque heure affichée dans votre application.
JavaScript fournit l'API Intl.DateTimeFormat pour gérer automatiquement le formatage de l'heure. Cette leçon explique pourquoi les formats d'heure varient, comment l'API contrôle l'affichage en format 12 heures ou 24 heures, et quand remplacer les paramètres par défaut de la locale.
Pourquoi les formats d'heure varient selon la locale
Différentes régions ont développé différentes conventions pour afficher l'heure. Ces conventions reflètent les pratiques culturelles, les systèmes éducatifs et les précédents historiques. Aucun format n'est universel.
Aux États-Unis, au Canada, en Australie et aux Philippines, le format 12 heures avec les indicateurs AM/PM est standard. L'heure de l'après-midi apparaît comme 2:30 PM.
Dans la plupart des pays d'Europe, d'Amérique latine et d'Asie, le format 24 heures est standard. La même heure apparaît comme 14:30 sans qu'aucun indicateur AM/PM ne soit nécessaire.
Certaines régions utilisent les deux formats selon le contexte. Le Royaume-Uni utilise le format 24 heures pour les horaires de transport mais le format 12 heures pour les conversations quotidiennes.
Lorsque vous affichez des heures, vous devez correspondre aux attentes de l'utilisateur pour sa région et son contexte.
Ce que signifient les formats 12 heures et 24 heures
Le format 12 heures divise la journée en deux périodes de 12 heures. Les heures vont de 12 à 11, puis recommencent. Le système utilise AM (ante meridiem) de minuit à midi et PM (post meridiem) de midi à minuit. Minuit commence à 12:00 AM et midi se produit à 12:00 PM.
12:00 AM → minuit
1:00 AM → 1 heure après minuit
11:59 AM → 1 minute avant midi
12:00 PM → midi
1:00 PM → 1 heure après midi
11:59 PM → 1 minute avant minuit
Le format 24 heures compte les heures en continu de 0 à 23. Minuit commence à 00:00 et la journée se termine à 23:59. Aucun indicateur AM/PM n'est nécessaire car chaque heure a un numéro unique.
00:00 → minuit
01:00 → 1 heure après minuit
11:59 → 1 minute avant midi
12:00 → midi
13:00 → 1 heure après midi
23:59 → 1 minute avant minuit
Différentes locales utilisent différents formats par défaut. L'API Intl.DateTimeFormat respecte ces valeurs par défaut mais permet de les remplacer si nécessaire.
Utilisation de l'option hour12 pour contrôler le format de l'heure
L'option hour12 contrôle l'utilisation du format 12 heures. Définissez-la à true pour le format 12 heures avec AM/PM, ou false pour le format 24 heures.
const date = new Date('2025-03-15T14:30:00');
const format12 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true
});
const format24 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: false
});
console.log(format12.format(date));
// Output: "2:30 PM"
console.log(format24.format(date));
// Output: "14:30"
L'option hour12 remplace le comportement par défaut de la locale. Même si l'anglais américain utilise généralement le format 12 heures, définir hour12: false force le format 24 heures.
Vous devez inclure soit hour dans les options, soit utiliser timeStyle pour que l'option hour12 prenne effet. Sans composant temporel dans la sortie, l'option n'a aucun impact.
Utilisation de l'option hourCycle pour un contrôle plus précis
L'option hourCycle offre un contrôle plus précis que hour12 en spécifiant exactement comment les heures doivent être comptées. Elle accepte quatre valeurs : "h11", "h12", "h23" et "h24".
const date = new Date('2025-03-15T00:30:00'); // 12:30 AM
const h11 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h11'
});
const h12 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12'
});
const h23 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h23'
});
const h24 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h24'
});
console.log(h11.format(date));
// Output: "0:30 AM"
console.log(h12.format(date));
// Output: "12:30 AM"
console.log(h23.format(date));
// Output: "00:30"
console.log(h24.format(date));
// Output: "24:30"
Chaque valeur de cycle horaire produit une sortie différente pour la même heure. Les différences deviennent plus évidentes à minuit et à midi.
Comprendre les quatre valeurs de hourCycle
Les quatre valeurs de hourCycle définissent comment les heures sont numérotées dans chaque période.
La valeur "h12" utilise le format 12 heures avec des heures de 1 à 12. Minuit apparaît comme 12:00 AM et midi comme 12:00 PM. C'est le format standard de 12 heures utilisé aux États-Unis.
La valeur "h11" utilise le format 12 heures avec des heures de 0 à 11. Minuit apparaît comme 0:00 AM et midi comme 0:00 PM. Ce format est moins courant mais apparaît dans certains contextes.
La valeur "h23" utilise le format 24 heures avec des heures de 0 à 23. Minuit apparaît comme 00:00 et la journée se termine à 23:59. C'est le format standard de 24 heures utilisé dans la plupart des pays d'Europe et d'Asie.
La valeur "h24" utilise le format 24 heures avec des heures de 1 à 24. Minuit apparaît comme 24:00 du point de vue du jour précédent. Ce format est rare mais apparaît dans certains contextes techniques.
La plupart des applications utilisent soit "h12" pour le format 12 heures, soit "h23" pour le format 24 heures.
Comparaison des heures à minuit selon les différents cycles horaires
Minuit démontre le plus clairement les différences entre les valeurs de cycle horaire.
const midnight = new Date('2025-03-15T00:00:00');
const cycles = ['h11', 'h12', 'h23', 'h24'];
cycles.forEach(cycle => {
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hourCycle: cycle
});
console.log(`${cycle}: ${formatter.format(midnight)}`);
});
// Output:
// h11: 0:00:00 AM
// h12: 12:00:00 AM
// h23: 00:00:00
// h24: 24:00:00
Les valeurs h12 et h23 produisent les représentations les plus familières pour leurs formats respectifs.
Comparaison des heures à midi selon les différents cycles horaires
Midi montre également comment les cycles horaires diffèrent.
const noon = new Date('2025-03-15T12:00:00');
const cycles = ['h11', 'h12', 'h23', 'h24'];
cycles.forEach(cycle => {
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hourCycle: cycle
});
console.log(`${cycle}: ${formatter.format(noon)}`);
});
// Output:
// h11: 0:00:00 PM
// h12: 12:00:00 PM
// h23: 12:00:00
// h24: 12:00:00
Encore une fois, h12 et h23 produisent des représentations standard tandis que h11 utilise 0 pour l'heure de midi.
Comment hour12 et hourCycle interagissent
Lorsque vous spécifiez à la fois hour12 et hourCycle, l'option hour12 prend la priorité et l'option hourCycle est ignorée.
const date = new Date('2025-03-15T14:30:00');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true,
hourCycle: 'h23' // Ceci est ignoré
});
console.log(formatter.format(date));
// Output: "2:30 PM" (format 12 heures issu de hour12: true)
Le paramètre hour12: true force le format 12 heures, remplaçant le paramètre hourCycle: 'h23' qui produirait normalement un format 24 heures.
En pratique, utilisez soit hour12 pour un contrôle simple, soit hourCycle pour un contrôle précis, mais pas les deux ensemble.
Respecter les paramètres par défaut de la locale
Lorsque vous omettez à la fois hour12 et hourCycle, le formateur utilise le format d'heure par défaut de la locale.
const date = new Date('2025-03-15T14:30:00');
const usFormatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const deFormatter = new Intl.DateTimeFormat('de-DE', {
hour: 'numeric',
minute: 'numeric'
});
const jpFormatter = new Intl.DateTimeFormat('ja-JP', {
hour: 'numeric',
minute: 'numeric'
});
console.log(usFormatter.format(date));
// Output: "2:30 PM" (par défaut US: 12 heures)
console.log(deFormatter.format(date));
// Output: "14:30" (par défaut allemand: 24 heures)
console.log(jpFormatter.format(date));
// Output: "14:30" (par défaut japonais: 24 heures)
La locale US utilise par défaut le format 12 heures tandis que les locales allemande et japonaise utilisent par défaut le format 24 heures. Respecter ces paramètres par défaut offre l'expérience la plus familière pour les utilisateurs de chaque région.
Remplacer les paramètres par défaut de la locale
Vous pouvez remplacer le format d'heure par défaut d'une locale en définissant explicitement hour12 ou hourCycle.
const date = new Date('2025-03-15T14:30:00');
// Forcer la locale allemande à utiliser le format 12 heures
const de12 = new Intl.DateTimeFormat('de-DE', {
hour: 'numeric',
minute: 'numeric',
hour12: true
});
// Forcer la locale américaine à utiliser le format 24 heures
const us24 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: false
});
console.log(de12.format(date));
// Résultat : "2:30 PM"
console.log(us24.format(date));
// Résultat : "14:30"
Cette approche fonctionne lorsque vous devez imposer un format d'heure spécifique indépendamment de la locale de l'utilisateur.
Quand respecter les paramètres par défaut de la locale
La plupart des applications devraient respecter les paramètres par défaut de la locale. Les utilisateurs de chaque région s'attendent à voir les heures apparaître dans le format qui leur est familier. Remplacer ces paramètres par défaut crée de la confusion.
Laissez le formateur utiliser le format d'heure par défaut de la locale lors de l'affichage des heures aux utilisateurs dans leur propre région.
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric'
});
const time = new Date('2025-03-15T14:30:00');
console.log(formatter.format(time));
// Le résultat varie selon la locale de l'utilisateur
// Pour en-US : "2:30 PM"
// Pour de-DE : "14:30"
// Pour ja-JP : "14:30"
Cette approche s'adapte automatiquement aux attentes de chaque utilisateur sans nécessiter de configuration.
Quand remplacer les paramètres par défaut de la locale
Remplacez les paramètres par défaut de la locale lorsque votre application nécessite une cohérence pour tous les utilisateurs. Les systèmes de transport, les applications militaires et les outils techniques ont souvent besoin du format 24 heures quelle que soit la locale.
// Toujours utiliser le format 24 heures pour les horaires de vol
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric',
hour12: false
});
const departureTime = new Date('2025-03-15T14:30:00');
console.log(`Départ : ${formatter.format(departureTime)}`);
// Résultat : "Départ : 14:30" (pour toutes les locales)
Cela assure la cohérence lors de l'affichage des heures que les utilisateurs doivent référencer avec précision, comme les horaires, les journaux ou les horodatages.
Vous pouvez également remplacer les paramètres par défaut lorsque les utilisateurs sélectionnent explicitement une préférence. Si votre application offre un paramètre pour choisir entre le format 12 heures et 24 heures, utilisez cette préférence au lieu du paramètre par défaut de la locale.
function formatTime(date, userPrefers24Hour) {
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric',
hour12: !userPrefers24Hour
});
return formatter.format(date);
}
const time = new Date('2025-03-15T14:30:00');
console.log(formatTime(time, false));
// Résultat : "2:30 PM"
console.log(formatTime(time, true));
// Résultat : "14:30"
Ce modèle respecte le choix de l'utilisateur tout en localisant d'autres aspects de l'affichage de l'heure comme les caractères séparateurs et la direction du texte.
Utilisation de hour12 avec timeStyle
L'option hour12 fonctionne avec les styles prédéfinis timeStyle. Cela vous permet de contrôler le format de l'heure tout en utilisant des styles prédéfinis pratiques.
const date = new Date('2025-03-15T14:30:45');
const short12 = new Intl.DateTimeFormat('en-US', {
timeStyle: 'short',
hour12: true
});
const short24 = new Intl.DateTimeFormat('en-US', {
timeStyle: 'short',
hour12: false
});
const medium12 = new Intl.DateTimeFormat('en-US', {
timeStyle: 'medium',
hour12: true
});
const medium24 = new Intl.DateTimeFormat('en-US', {
timeStyle: 'medium',
hour12: false
});
console.log(short12.format(date));
// Output: "2:30 PM"
console.log(short24.format(date));
// Output: "14:30"
console.log(medium12.format(date));
// Output: "2:30:45 PM"
console.log(medium24.format(date));
// Output: "14:30:45"
Cette approche simplifie le formatage en combinant des styles prédéfinis avec un contrôle explicite du format d'heure.
Formatage des heures pour plusieurs locales
Lorsque votre application sert des utilisateurs dans plusieurs régions, formatez les heures selon les conventions de chaque locale.
const date = new Date('2025-03-15T14:30:00');
const locales = [
{ code: 'en-US', name: 'United States' },
{ code: 'en-GB', name: 'United Kingdom' },
{ code: 'de-DE', name: 'Germany' },
{ code: 'ja-JP', name: 'Japan' }
];
locales.forEach(locale => {
const formatter = new Intl.DateTimeFormat(locale.code, {
hour: 'numeric',
minute: 'numeric'
});
console.log(`${locale.name}: ${formatter.format(date)}`);
});
// Output:
// United States: 2:30 PM
// United Kingdom: 14:30
// Germany: 14:30
// Japan: 14:30
Chaque locale utilise automatiquement son format préféré. Vous n'avez pas besoin de savoir quelles régions utilisent quel format.
Vérification du cycle horaire résolu
Vous pouvez vérifier quel cycle horaire le formateur utilise réellement en appelant resolvedOptions().
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const options = formatter.resolvedOptions();
console.log(options.hourCycle);
// Output: "h12"
console.log(options.hour12);
// Output: true
Cette méthode renvoie les paramètres réels que le formateur utilise après avoir résolu tous les paramètres par défaut de la locale et les options explicites. L'objet retourné inclut à la fois les propriétés hourCycle et hour12 lorsque des composants temporels sont présents.
Formatage des heures dans les modèles
Vous pouvez utiliser des heures formatées partout où vous affichez des informations temporelles aux utilisateurs. Cela inclut l'insertion d'heures dans le HTML, l'affichage d'horodatages dans les journaux ou l'affichage de plannings.
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric'
});
const meetingTime = new Date('2025-03-15T14:30:00');
const deadlineTime = new Date('2025-03-15T17:00:00');
document.getElementById('meeting').textContent = formatter.format(meetingTime);
document.getElementById('deadline').textContent = formatter.format(deadlineTime);
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 contexte où vous affichez des informations aux utilisateurs.
Ce qu'il faut retenir
Utilisez l'option hour12 pour basculer entre le format 12 heures et 24 heures. Définissez-la sur true pour le format 12 heures avec AM/PM ou false pour le format 24 heures.
Utilisez l'option hourCycle pour un contrôle précis de la numérotation des heures. La valeur "h12" fournit le format standard de 12 heures et "h23" fournit le format standard de 24 heures.
Respectez les paramètres par défaut de la locale dans la plupart des applications. Les utilisateurs s'attendent à ce que les heures apparaissent dans le format familier de leur région. Ne remplacez les valeurs par défaut que lorsque la cohérence entre tous les utilisateurs est plus importante que le respect des conventions régionales.
Combinez hour12 avec les préréglages timeStyle pour contrôler le format de l'heure tout en utilisant des styles prédéfinis pratiques pour les autres composants temporels.