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 de l'utilisateur
Introduction
L'heure s'affiche différemment dans 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 les heures dans un seul format, vous supposez que tous les utilisateurs suivent la même convention.
Afficher les heures dans un format inhabituel crée des frictions. 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 des heures. Cette leçon explique pourquoi les formats horaires varient, comment l'API contrôle l'affichage 12 heures versus 24 heures, et quand remplacer les paramètres régionaux par défaut.
Pourquoi les formats horaires varient selon les paramètres régionaux
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 unique n'est universel.
Aux États-Unis, au Canada, en Australie et aux Philippines, le format 12 heures avec indicateurs AM/PM est standard. L'heure de l'après-midi apparaît comme 2:30 PM.
Dans la majeure partie de l'Europe, de l'Amérique latine et de l'Asie, le format 24 heures est standard. La même heure apparaît comme 14:30 sans indicateur AM/PM 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.
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) pour minuit à midi et PM (post meridiem) pour midi à minuit. Minuit commence à 12:00 AM et midi se produit à 12:00 PM.
12:00 AM → midnight
1:00 AM → 1 hour after midnight
11:59 AM → 1 minute before noon
12:00 PM → noon
1:00 PM → 1 hour after noon
11:59 PM → 1 minute before midnight
Le format 24 heures compte les heures de manière continue 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 → midnight
01:00 → 1 hour after midnight
11:59 → 1 minute before noon
12:00 → noon
13:00 → 1 hour after noon
23:59 → 1 minute before midnight
Différentes locales utilisent différents formats par défaut. L'API Intl.DateTimeFormat respecte ces valeurs par défaut mais vous permet de les remplacer si nécessaire.
Utiliser l'option hour12 pour contrôler le format de l'heure
L'option hour12 contrôle s'il faut utiliser le format 12 heures. Définissez-la sur 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. Bien que 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.
Utiliser l'option hourCycle pour un contrôle précis
L'option hourCycle offre plus de contrôle 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 un résultat différent pour la même heure. Les différences deviennent plus apparentes à minuit et à midi.
Comprendre les quatre valeurs de hourCycle
Les quatre valeurs 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 apparaît comme 12:00 PM. C'est le format 12 heures standard 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 apparaît 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 24 heures standard 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 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 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 a 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' // This is ignored
});
console.log(formatter.format(date));
// Output: "2:30 PM" (12-hour format from hour12: true)
Le paramètre hour12: true force le format 12 heures, remplaçant le paramètre hourCycle: 'h23' qui produirait normalement le 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 horaire 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" (US default: 12-hour)
console.log(deFormatter.format(date));
// Output: "14:30" (German default: 24-hour)
console.log(jpFormatter.format(date));
// Output: "14:30" (Japanese default: 24-hour)
La locale américaine 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 aux utilisateurs de chaque région.
Remplacer les paramètres par défaut de la locale
Vous pouvez remplacer le format horaire par défaut d'une locale en définissant explicitement hour12 ou hourCycle.
const date = new Date('2025-03-15T14:30:00');
// Force German locale to use 12-hour format
const de12 = new Intl.DateTimeFormat('de-DE', {
hour: 'numeric',
minute: 'numeric',
hour12: true
});
// Force US locale to use 24-hour format
const us24 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: false
});
console.log(de12.format(date));
// Output: "2:30 PM"
console.log(us24.format(date));
// Output: "14:30"
Cette approche fonctionne lorsque vous devez imposer un format horaire spécifique quelle que soit 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 à ce que les heures apparaissent dans leur format familier. Remplacer ces paramètres par défaut crée de la confusion.
Laissez le formateur utiliser le format horaire 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));
// Output varies by user's locale
// For en-US: "2:30 PM"
// For de-DE: "14:30"
// For 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 entre 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.
// Always use 24-hour format for flight times
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric',
hour12: false
});
const departureTime = new Date('2025-03-15T14:30:00');
console.log(`Departure: ${formatter.format(departureTime)}`);
// Output: "Departure: 14:30" (for all locales)
Cela garantit la cohérence lors de l'affichage d'heures que les utilisateurs doivent référencer avec précision, telles que 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 propose 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));
// Output: "2:30 PM"
console.log(formatTime(time, true));
// Output: "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 de séparation 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 de l'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 renvoyé inclut à la fois les propriétés hourCycle et hour12 lorsque des composants temporels sont présents.
Formatage des heures dans les templates
Vous pouvez utiliser des heures formatées partout où vous affichez des informations temporelles aux utilisateurs. Cela inclut l'insertion d'heures dans du HTML, l'affichage d'horodatages dans les logs 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 12 heures standard et "h23" fournit le format 24 heures standard.
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 paramètres 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 des heures tout en utilisant des styles préréglés pratiques pour les autres composants temporels.