Comment afficher AM/PM ou les périodes de la journée spécifiques à chaque locale
Utilisez JavaScript pour afficher les périodes de temps qui correspondent à la façon dont chaque culture divise la journée
Introduction
Lorsque vous affichez une heure comme 4:00, les utilisateurs ont besoin de contexte pour savoir si cela se produit le matin ou l'après-midi. En anglais, vous ajoutez AM ou PM pour clarifier. 4:00 AM se produit avant le lever du soleil, tandis que 4:00 PM se produit dans l'après-midi.
Les autres langues ne traduisent pas simplement AM et PM. De nombreuses cultures divisent la journée en plus de deux périodes, avec des termes spécifiques pour le petit matin, la fin de matinée, l'après-midi, la soirée et la nuit. L'espagnol utilise "madrugada" pour les heures après minuit mais avant l'aube. L'allemand divise la journée en six périodes distinctes au lieu de deux. Certaines langues appellent 1:00 AM "1 heure du matin" plutôt que "1 heure du matin".
L'option dayPeriod de Intl.DateTimeFormat de JavaScript permet d'afficher automatiquement ces divisions temporelles spécifiques à chaque culture. Cette leçon explique comment fonctionnent les périodes de la journée selon les cultures, pourquoi elles sont importantes pour les applications internationales, et comment formater les heures avec des libellés de période appropriés.
Pourquoi les périodes de la journée varient selon les cultures
Différentes cultures ont développé différentes façons de diviser la journée de 24 heures en périodes nommées. Ces divisions reflètent la manière dont les personnes de chaque culture pensent et parlent du temps.
Les anglophones divisent la journée en quatre périodes. Le matin (morning) s'étend de minuit à midi, l'après-midi (afternoon) de midi au soir, la soirée (evening) de la fin de l'après-midi jusqu'à la nuit tombée, et la nuit (night) de la nuit tombée jusqu'à minuit. Les termes AM et PM fournissent un système plus simple à deux périodes pour l'horloge de 12 heures.
Les hispanophones reconnaissent "madrugada" comme une période distincte couvrant les heures après minuit mais avant que les gens ne se réveillent généralement. Cela crée un système à cinq périodes qui distingue les heures tardives de la nuit et les heures du petit matin.
Les russophones utilisent "ночь" (nuit) pour désigner toute heure où les gens dorment généralement. 1:00 AM est "1 heure du matin" plutôt que "1 heure du matin" car les gens dorment normalement à cette heure.
L'allemand divise la journée en six périodes. "Morgen" (matin), "Vormittag" (matinée), "Mittag" (midi), "Nachmittag" (après-midi), "Abend" (soir), et "Nacht" (nuit) couvrent chacun des plages horaires spécifiques.
L'indonésien utilise "pagi" (de l'aube à 10h), "siang" (de 10h à 14h), "sore" (de 14h au coucher du soleil), et "malam" (nuit) pour diviser la journée en quatre périodes basées sur la position du soleil.
Le bengali divise la journée en six périodes. "ভোর" (aube), "সকাল" (matin), "দুপুর" (début d'après-midi), "বিকাল" (fin d'après-midi), "সন্ধ্যা" (soir), et "রাত" (nuit) ont chacun des plages horaires spécifiques.
Lorsque vous affichez des heures dans une application internationale, vous devez utiliser des termes qui correspondent à la façon dont les utilisateurs de chaque culture parlent naturellement du temps. Montrer "4 AM" à tous les utilisateurs ignore comment les autres langues décrivent cette heure.
Comprendre l'option dayPeriod
L'option dayPeriod dans Intl.DateTimeFormat indique au formateur d'inclure la période du jour spécifique à la locale lors du formatage d'une heure. Au lieu d'afficher uniquement l'heure et les minutes, le formateur ajoute le terme approprié pour ce moment de la journée dans la langue cible.
Cette option fonctionne uniquement avec les formats d'heure sur 12 heures. Dans les formats 24 heures, le numéro d'heure lui-même fournit suffisamment de contexte. 04:00 est clairement le matin et 16:00 est clairement l'après-midi sans étiquettes supplémentaires. Les périodes du jour existent pour lever l'ambiguïté des heures répétées dans le format 12 heures.
L'option dayPeriod accepte trois valeurs. narrow produit la forme la plus courte possible, souvent une seule lettre ou abréviation. short produit une forme abrégée. long produit le mot ou la phrase complète.
Pour de nombreuses locales, ces trois valeurs produisent une sortie identique. Les données de locale Unicode ne définissent pas de formes distinctes pour chaque combinaison de locale et de longueur de format. Lorsque des formes distinctes n'existent pas, le formateur utilise la même sortie quelle que soit la valeur que vous spécifiez.
Formatage des heures avec les périodes du jour
Pour afficher une période du jour, créez une instance Intl.DateTimeFormat avec l'option dayPeriod définie sur narrow, short ou long. Vous devez également inclure une option de composant temporel comme hour et spécifier un format 12 heures en utilisant hourCycle.
const date = new Date('2025-01-15T04:30:00');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(formatter.format(date));
// Output: "4:30 in the morning"
Cela crée un formateur qui affiche l'heure, les minutes et la période du jour. L'option hourCycle: 'h12' spécifie le format 12 heures, qui est requis pour que les périodes du jour apparaissent. L'option dayPeriod: 'long' demande la phrase complète de la période du jour.
Sans l'option dayPeriod, le formateur afficherait "4:30 AM" à la place. L'option de période du jour remplace l'indicateur simple AM/PM par une phrase plus descriptive.
Affichage des périodes de la journée à différentes heures
Les périodes de la journée changent en fonction de l'heure formatée. Le formateur sélectionne automatiquement la période appropriée pour chaque heure selon les conventions de la locale.
const options = {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
};
const formatter = new Intl.DateTimeFormat('en-US', options);
const morning = new Date('2025-01-15T04:30:00');
console.log(formatter.format(morning));
// Output: "4:30 in the morning"
const afternoon = new Date('2025-01-15T14:30:00');
console.log(formatter.format(afternoon));
// Output: "2:30 in the afternoon"
const evening = new Date('2025-01-15T20:30:00');
console.log(formatter.format(evening));
// Output: "8:30 in the evening"
const night = new Date('2025-01-15T23:30:00');
console.log(formatter.format(night));
// Output: "11:30 at night"
L'anglais distingue entre le matin, l'après-midi, le soir et la nuit. Chaque heure reçoit la phrase appropriée en fonction de l'heure. Vous n'avez pas besoin de déterminer quelle période s'applique. Le formateur gère cela automatiquement en fonction des données de locale Unicode.
Comparaison des formats étroit, court et long
Les trois longueurs de format produisent des résultats différents dans certaines locales. Les différences varient selon la langue et peuvent être subtiles ou inexistantes.
const date = new Date('2025-01-15T04:30:00');
const narrow = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'narrow'
});
console.log(narrow.format(date));
// Output: "4 in the morning"
const short = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'short'
});
console.log(short.format(date));
// Output: "4 in the morning"
const long = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(long.format(date));
// Output: "4 in the morning"
Pour l'anglais américain, les trois longueurs produisent un résultat identique. Les données de locale ne définissent pas de formes différentes pour cette combinaison de langue et d'heure.
Certaines locales font la distinction entre les longueurs. Le français produit des résultats différents pour les formats étroit et long.
const date = new Date('2025-01-15T04:30:00');
const frNarrow = new Intl.DateTimeFormat('fr-FR', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'narrow'
});
console.log(frNarrow.format(date));
// Output: "4 mat."
const frLong = new Intl.DateTimeFormat('fr-FR', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(frLong.format(date));
// Output: "4 du matin"
Le français utilise "mat." comme forme abrégée et "du matin" comme forme longue. Les deux signifient matin, mais la forme longue est plus explicite.
Sauf si vous avez des contraintes d'espace spécifiques nécessitant la sortie la plus courte possible, utilisez long pour plus de clarté. Les formes plus longues sont plus faciles à comprendre pour les utilisateurs, et de nombreuses locales ne proposent pas d'alternatives plus courtes de toute façon.
Comment fonctionnent les périodes de la journée selon les locales
Différentes locales utilisent différents termes pour les périodes de la journée et divisent la journée à différentes limites. Le formateur applique automatiquement les conventions pour chaque locale.
const date = new Date('2025-01-15T04:30:00');
const options = {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
};
const enUS = new Intl.DateTimeFormat('en-US', options);
console.log(enUS.format(date));
// Output: "4 in the morning"
const enGB = new Intl.DateTimeFormat('en-GB', options);
console.log(enGB.format(date));
// Output: "4 at night"
const deDK = new Intl.DateTimeFormat('de-DE', options);
console.log(deDK.format(date));
// Output: "4 morgens"
const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date));
// Output: "4 du matin"
L'anglais britannique considère 4h30 du matin comme étant "at night" (la nuit) plutôt que "in the morning" (le matin), reflétant des limites culturelles différentes pour les périodes de la journée. L'allemand utilise "morgens" pour les heures du matin. Le français utilise "du matin" pour la même période.
Ces différences ne sont pas des erreurs ou des incohérences. Elles reflètent de véritables différences culturelles dans la façon dont les gens conceptualisent et parlent du temps. Le formateur respecte automatiquement ces différences en fonction de la locale.
Les périodes de la journée nécessitent un format 12 heures
L'option dayPeriod ne fonctionne que lorsque vous spécifiez un format 12 heures en utilisant hourCycle: 'h12' ou hourCycle: 'h11'. Sans format 12 heures, les périodes de la journée n'apparaissent pas.
const date = new Date('2025-01-15T04:30:00');
const with12Hour = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(with12Hour.format(date));
// Output: "4 in the morning"
const with24Hour = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
hourCycle: 'h23',
dayPeriod: 'long'
});
console.log(with24Hour.format(date));
// Output: "04"
Le format 24 heures n'affiche pas la période de la journée même si l'option est spécifiée. En format 24 heures, le numéro de l'heure fournit un contexte suffisant sans étiquettes supplémentaires.
La différence entre h12 et h11 concerne la façon dont minuit et midi sont numérotés. Utilisez h12 pour l'horloge standard de 12 heures où les heures vont de 1 à 12. Utilisez h11 pour un système d'heures de 0 à 11. Les deux fonctionnent avec les périodes de la journée.
Combiner les périodes de la journée avec les minutes et les secondes
Vous pouvez inclure les minutes et les secondes avec les périodes de la journée. Le formateur positionne la période de la journée de manière appropriée selon les conventions de la locale.
const date = new Date('2025-01-15T04:30:45');
const withMinutes = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(withMinutes.format(date));
// Output: "4:30 in the morning"
const withSeconds = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(withSeconds.format(date));
// Output: "4:30:45 in the morning"
La période de la journée apparaît après les composants de temps. Vous n'avez pas besoin de positionner ou de formater manuellement la période de la journée. Le formateur gère la mise en page selon les conventions de la locale.
Formater les heures avec les périodes de la journée pour la locale de l'utilisateur
Au lieu de coder en dur une locale spécifique, utilisez 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 date = new Date('2025-01-15T04:30:00');
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12',
dayPeriod: 'long'
});
console.log(formatter.format(date));
// Le résultat varie selon la locale de l'utilisateur
// Pour en-US: "4:30 in the morning"
// Pour en-GB: "4:30 at night"
// Pour de-DE: "4:30 morgens"
// Pour fr-FR: "4:30 du matin"
Cette approche affiche les heures avec des périodes de la journée qui correspondent à la façon dont chaque utilisateur parle naturellement du temps. Le navigateur fournit la préférence linguistique, et l'API Intl applique les termes et limites de période de journée appropriés.
Quand utiliser les périodes de la journée
Les périodes de la journée fonctionnent bien lorsque vous souhaitez fournir plus de contexte que les simples indicateurs AM/PM. Elles rendent les heures plus conversationnelles et plus faciles à interpréter d'un coup d'œil.
Utilisez les périodes de la journée dans les interfaces utilisateur où les heures apparaissent à côté de texte descriptif. Un calendrier indiquant "4:30 du matin" est plus clair que "4:30 AM" car la phrase semble plus naturelle dans un texte courant.
Utilisez les périodes de la journée dans les notifications et les messages où un langage conversationnel améliore la lisibilité. "Votre réunion commence à 20:30 du soir" se lit mieux que "Votre réunion commence à 20:30 PM".
Évitez les périodes de la journée dans les affichages compacts où l'espace est limité. Les tableaux, graphiques et mises en page denses fonctionnent mieux avec les indicateurs AM/PM standard ou le format 24 heures.
Évitez les périodes de la journée lors de l'affichage des heures au format 24 heures. La période de la journée n'ajoute aucune information utile lorsque le numéro d'heure indique déjà le moment de la journée.
Résumé
L'option dayPeriod dans Intl.DateTimeFormat affiche des termes spécifiques à chaque culture pour les moments de la journée. Différentes cultures divisent la journée différemment, utilisant des termes comme "madrugada" en espagnol ou six périodes distinctes en allemand au lieu de simplement AM et PM.
L'option accepte trois valeurs. narrow produit la forme la plus courte, short produit une forme abrégée, et long produit la phrase complète. De nombreuses locales produisent des résultats identiques pour les trois valeurs.
Les périodes de la journée n'apparaissent que lors de l'utilisation du format 12 heures spécifié avec hourCycle: 'h12' ou hourCycle: 'h11'. Elles n'apparaissent pas dans le format 24 heures car le numéro de l'heure fournit un contexte suffisant.
Différentes locales utilisent différents termes pour les périodes de la journée et établissent des limites à différentes heures. Le formateur applique ces conventions automatiquement en fonction de l'identifiant de locale. L'anglais britannique considère 4h30 du matin comme "at night" (la nuit) tandis que l'anglais américain le considère comme "in the morning" (le matin).