Comment afficher AM/PM ou les périodes de la journée spécifiques à chaque langue

Introduction

Lorsque vous affichez une heure comme 4:00, les utilisateurs ont besoin de contexte pour savoir s'il s'agit du matin ou de 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.

D'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 a « 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 de la nuit » plutôt que « 1 du matin ».

L'objet Intl.DateTimeFormat de JavaScript fournit l'option dayPeriod pour afficher automatiquement ces divisions horaires spécifiques à chaque culture. Cette leçon explique comment les périodes de la journée fonctionnent selon les cultures, pourquoi elles sont importantes pour les applications internationales, et comment formater les heures avec les 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 façon dont les personnes de chaque culture pensent et parlent du temps.

Les anglophones divisent la journée en quatre périodes. Le matin s'étend de minuit à midi, l'après-midi de midi au soir, le soir de la fin d'après-midi jusqu'à la tombée de la nuit, et la nuit de la tombée de la nuit jusqu'à minuit. Les termes AM et PM fournissent un système plus simple à deux périodes pour l'horloge de 12 heures.

Les locuteurs espagnols reconnaissent « madrugada » comme une période distincte couvrant les heures après minuit mais avant le réveil habituel des gens. Cela crée un système à cinq périodes qui distingue les heures de fin de nuit des heures du petit matin.

Les locuteurs russes utilisent « ночь » (nuit) pour désigner toute heure où les gens dorment habituellement. 1h00 du matin est « 1 de nuit » plutôt que « 1 du matin » car les gens dorment normalement à cette heure-là.

L'allemand divise la journée en six périodes. « Morgen » (matin), « Vormittag » (avant-midi), « Mittag » (midi), « Nachmittag » (après-midi), « Abend » (soirée) 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ée) 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. Afficher « 4 AM » à tous les utilisateurs ignore la façon dont 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 de la journée 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 sur 24 heures, le numéro de l'heure fournit suffisamment de contexte. 04h00 est clairement le matin et 16h00 est clairement l'après-midi sans étiquettes supplémentaires. Les périodes de la journée existent pour lever l'ambiguïté des heures répétées dans le format sur 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 un résultat 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 le même résultat quelle que soit la valeur spécifiée.

Formater les heures avec les périodes de la journée

Pour afficher une période de la journée, 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 de la journée. L'option hourCycle: 'h12' spécifie le format 12 heures, qui est requis pour que les périodes de la journée apparaissent. L'option dayPeriod: 'long' demande la phrase complète de la période de la journée.

Sans l'option dayPeriod, le formateur afficherait "4:30 AM" à la place. L'option de période de la journée remplace le simple indicateur AM/PM par une phrase plus descriptive.

Afficher les périodes de la journée à différents moments

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 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 le résultat le plus court possible, utilisez long pour plus de clarté. Les formes longues sont plus faciles à comprendre pour les utilisateurs, et de nombreuses locales ne fournissent de toute façon pas d'alternatives plus courtes.

Fonctionnement des périodes de la journée selon les locales

Différentes locales utilisent différents termes de période de la journée et divisent la journée à des limites différentes. Le formateur applique automatiquement les conventions de 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 » plutôt que « in the morning », 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 le 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 l'heure. Vous n'avez pas besoin de positionner ou de formater manuellement la période de la journée. Le formateur gère la disposition 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));
// Output varies by user's locale
// For en-US: "4:30 in the morning"
// For en-GB: "4:30 at night"
// For de-DE: "4:30 morgens"
// For 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 la 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 de 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 aux côtés de texte descriptif. Un calendrier affichant « 4h30 du matin » est plus clair que « 4h30 AM » car la phrase sonne plus naturelle dans un texte continu.

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 à 8h30 du soir" se lit mieux que "Votre réunion commence à 20h30".

É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 de l'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 une sortie identique 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 au format 24 heures car le numéro de l'heure fournit un contexte suffisant.

Différentes locales utilisent différents termes de période de la journée et tracent des limites à différentes heures. Le formateur applique automatiquement ces conventions en fonction de l'identifiant de locale. L'anglais britannique traite 4h30 du matin comme "at night" tandis que l'anglais américain le traite comme "in the morning".