Comment formater les heures en court, moyen, long ou complet
Utilisez des styles d'heure prédéfinis pour contrôler quels composants temporels afficher sans les configurer individuellement
Introduction
Le formatage des heures nécessite de choisir quels composants afficher. Vous pourriez montrer les heures et les minutes pour l'heure d'une réunion, ajouter les secondes pour un horodatage précis, ou inclure des informations de fuseau horaire pour coordonner entre différentes régions. Chaque composant possède ses propres options de formatage. Configurer toutes ces options individuellement crée un code verbeux et nécessite de comprendre quelles combinaisons fonctionnent bien ensemble.
L'API Intl.DateTimeFormat de JavaScript fournit des styles prédéfinis qui regroupent les choix de formatage courants en options simples. Au lieu de spécifier que vous voulez des heures numériques, des minutes numériques et des secondes numériques, vous pouvez demander timeStyle: "medium". Au lieu de configurer l'affichage des heures et des minutes séparément, vous pouvez demander timeStyle: "short".
Ces préréglages fonctionnent dans toutes les locales. Le même style produit une sortie appropriée, que ce soit pour l'anglais américain, l'allemand, le japonais ou l'arabe. Cette leçon explique ce que fournit chaque niveau de style et quand utiliser chacun d'eux.
Qu'est-ce que timeStyle
L'option timeStyle contrôle l'apparence des heures. Elle affecte quels composants temporels s'affichent et leur niveau de détail. L'option accepte quatre valeurs : "short", "medium", "long" et "full".
Cette option fournit un raccourci pour définir plusieurs options de formatage à la fois. Lorsque vous spécifiez un style, le formateur sélectionne automatiquement des valeurs appropriées pour les composants comme l'heure, la minute, la seconde et le nom du fuseau horaire en fonction de la locale.
const formatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short"
});
console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Résultat : "2:30 PM"
Cette option unique remplace ce qui nécessiterait autrement de définir plusieurs options de composants individuels.
Comprendre les quatre niveaux de style
Chaque niveau de style représente un équilibre différent entre brièveté et détail. Les styles courts minimisent l'espace en n'affichant que les composants essentiels. Les styles complets maximisent la clarté en incluant tous les composants pertinents comme les noms de fuseau horaire.
Le style "short" produit une sortie compacte montrant les heures et les minutes. Il omet les secondes et les informations de fuseau horaire, ce qui le rend adapté à la plupart des besoins quotidiens d'affichage de l'heure.
Le style "medium" ajoute les secondes pour fournir plus de précision. Il omet toujours les informations de fuseau horaire mais donne un timing exact à la seconde près.
Le style "long" ajoute des informations abrégées de fuseau horaire. Il inclut les heures, les minutes, les secondes et un code court de fuseau horaire comme PST ou GMT.
Le style "full" produit la représentation la plus complète. Il inclut tous les composants temporels avec le fuseau horaire écrit complètement, comme Pacific Standard Time.
Les composants exacts et le formatage pour chaque style varient selon la locale. L'anglais américain utilise généralement le format 12 heures avec AM/PM, tandis que l'allemand utilise le format 24 heures. Le niveau de détail relatif reste cohérent entre les locales.
Formater les heures avec timeStyle
L'option timeStyle contrôle le formatage de l'heure. Chaque niveau de style produit une sortie différente pour la même heure.
const date = new Date("2025-03-15T14:30:45");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "full"
});
console.log(shortFormatter.format(date));
// Output: "2:30 PM"
console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"
console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"
console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"
Le style court affiche uniquement les heures et les minutes, ce qui le rend plus compact. Le style moyen ajoute les secondes pour plus de précision. Le style long inclut un code de fuseau horaire abrégé. Le style complet épelle le nom complet du fuseau horaire pour une clarté maximale.
Combiner dateStyle et timeStyle
Vous pouvez utiliser ces deux options ensemble pour formater des horodatages complets. Le formateur applique les deux styles indépendamment.
const date = new Date("2025-03-15T14:30:45");
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "short"
});
console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"
La date apparaît avec un formatage long tandis que l'heure utilise un formatage court. Cette combinaison fournit un contexte détaillé de la date tout en gardant l'heure concise.
Vous pouvez combiner n'importe quel style de date avec n'importe quel style d'heure selon vos besoins.
const date = new Date("2025-03-15T14:30:45");
const combinations = [
{ dateStyle: "short", timeStyle: "short" },
{ dateStyle: "medium", timeStyle: "medium" },
{ dateStyle: "long", timeStyle: "long" },
{ dateStyle: "full", timeStyle: "full" }
];
combinations.forEach(options => {
const formatter = new Intl.DateTimeFormat("en-US", options);
console.log(formatter.format(date));
});
// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
L'utilisation de niveaux de style correspondants produit un niveau de détail cohérent pour la date et l'heure. Le mélange des styles vous permet de mettre l'accent sur un aspect plutôt que sur l'autre.
Comment les styles d'heure varient selon les locales
Chaque locale formate les heures selon ses propres conventions. Le même style produit des résultats différents pour différentes locales, mais le niveau relatif de détail reste cohérent.
const date = new Date("2025-03-15T14:30:45");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "short"
});
const longFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Long: ${longFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 2:30 PM
// Long: 2:30:45 PM PST
// de-DE:
// Short: 14:30
// Long: 14:30:45 PST
// fr-FR:
// Short: 14:30
// Long: 14:30:45 UTC−8
// ja-JP:
// Short: 14:30
// Long: 14:30:45 PST
L'anglais américain utilise le format 12 heures avec AM/PM. L'allemand, le français et le japonais utilisent le format 24 heures. Le style long ajoute des informations de fuseau horaire avec un formatage approprié à chaque locale.
Ces différences reflètent les conventions de chaque culture pour l'affichage de l'heure. L'API gère automatiquement ces variations en fonction de l'identifiant de locale.
Quand utiliser le style court
Le style court fonctionne mieux pour la plupart des affichages quotidiens de l'heure. Il montre les informations dont les utilisateurs ont généralement besoin sans encombrer l'interface avec des secondes ou des détails de fuseau horaire.
Utilisez le style d'heure court pour afficher les heures de réunion, la planification de rendez-vous, ou tout contexte où la précision à la seconde n'est pas nécessaire. La plupart des utilisateurs pensent en termes d'heures et de minutes plutôt qu'en secondes exactes.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "short"
});
const meetings = [
{ title: "Team standup", time: new Date("2025-03-15T09:00:00") },
{ title: "Client call", time: new Date("2025-03-15T14:30:00") },
{ title: "Code review", time: new Date("2025-03-15T16:45:00") }
];
meetings.forEach(meeting => {
console.log(`${meeting.title}: ${formatter.format(meeting.time)}`);
});
// Output:
// Team standup: 9:00 AM
// Client call: 2:30 PM
// Code review: 4:45 PM
Les applications de calendrier, les interfaces de planification et les sélecteurs d'heure bénéficient du style court. Le format compact maintient les interfaces épurées tout en fournissant toutes les informations dont les utilisateurs ont besoin pour comprendre quand les événements se produisent.
Le style court suppose que les utilisateurs comprennent le contexte du fuseau horaire. Lorsque tous les utilisateurs opèrent dans le même fuseau horaire ou lorsque l'application gère la conversion de fuseau horaire de manière transparente, l'affichage explicite du fuseau horaire devient redondant.
Quand utiliser le style moyen
Le style moyen offre une précision de second niveau tout en gardant les informations de fuseau horaire implicites. Cela le rend approprié pour les contextes où le timing exact est important mais où le fuseau horaire est compris à partir du contexte.
Utilisez le style d'heure moyen lors de l'affichage d'horodatages précis dans les journaux d'application, les flux d'activité ou les pistes d'audit. Ces contextes bénéficient de savoir exactement quand les actions se sont produites à la seconde près.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "medium"
});
const activities = [
{ action: "Utilisateur connecté", time: new Date("2025-03-15T09:15:23") },
{ action: "Fichier téléchargé", time: new Date("2025-03-15T09:18:47") },
{ action: "Paramètres mis à jour", time: new Date("2025-03-15T09:22:11") }
];
activities.forEach(activity => {
console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});
// Sortie :
// Utilisateur connecté : 9:15:23 AM
// Fichier téléchargé : 9:18:47 AM
// Paramètres mis à jour : 9:22:11 AM
Les outils de développement, les interfaces de débogage et les tableaux de bord de surveillance des performances utilisent le style moyen pour afficher des informations de timing précises. La précision à la seconde aide à identifier les modèles, mesurer les durées et corréler les événements.
Le style moyen fonctionne bien lorsque vous avez besoin de plus de détails que ce que le style court fournit, mais que vous n'avez pas besoin de la verbosité des informations de fuseau horaire. La plupart des utilisateurs peuvent déduire le fuseau horaire à partir du contexte de l'application.
Quand utiliser le style long
Le style long ajoute des informations de fuseau horaire abrégées à l'affichage de l'heure. Cela aide les utilisateurs à comprendre quand les événements se sont produits ou se produiront par rapport à leur propre fuseau horaire.
Utilisez le style d'heure long lors de la coordination entre fuseaux horaires ou lors de l'affichage d'heures qui pourraient être interprétées différemment selon l'emplacement du spectateur. Le code de fuseau horaire abrégé fournit un contexte sans prendre trop d'espace.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const events = [
{ name: "Début du webinaire", time: new Date("2025-03-15T14:00:00") },
{ name: "Fermeture des inscriptions", time: new Date("2025-03-15T13:30:00") }
];
events.forEach(event => {
console.log(`${event.name}: ${formatter.format(event.time)}`);
});
// Sortie :
// Début du webinaire : 2:00:00 PM EST
// Fermeture des inscriptions : 1:30:00 PM EST
Les applications internationales, les outils de planification pour les équipes distribuées et les plateformes de coordination d'événements bénéficient du style long. Le code de fuseau horaire élimine l'ambiguïté sur le fuseau horaire que l'heure représente.
Les systèmes de réservation de vols, les applications de planification de conférences et les outils de travail à distance utilisent le style long pour aider les utilisateurs à comprendre l'heure dans différents fuseaux horaires. Le format équilibre la clarté avec l'efficacité spatiale.
Quand utiliser le style complet
Le style complet produit la représentation temporelle la plus complète. Il écrit le nom complet du fuseau horaire, éliminant toute ambiguïté concernant le fuseau horaire que l'heure représente.
Utilisez le style d'heure complet lorsque vous affichez des heures qui nécessitent une clarté maximale. Écrire le nom complet du fuseau horaire aide les utilisateurs dans différentes régions à comprendre exactement quand un événement se produit.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full",
timeStyle: "full"
});
const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Résultat : "samedi 15 mars 2025 à 14:30:45 heure normale du Pacifique"
Le style complet fonctionne bien pour afficher des événements importants singuliers, des messages de confirmation ou partout où les utilisateurs bénéficient de voir le contexte temporel complet. Les invitations à des réunions internationales, les confirmations d'événements et les communications formelles de planification bénéficient de ce niveau de détail.
Les documents juridiques sensibles au temps, les registres officiels et les horodatages liés à la conformité utilisent le style complet pour établir des informations temporelles sans ambiguïté. Le nom complet du fuseau horaire évite toute confusion quant au moment où les événements se sont produits.
Comprendre les restrictions
L'option timeStyle ne peut pas être utilisée avec des options de composants temporels individuels. Vous devez choisir entre utiliser des préréglages de style ou configurer les composants individuellement.
Ceci ne fonctionnera pas :
const formatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium",
hour: "2-digit" // Erreur : impossible de combiner
});
L'option timeStyle détermine déjà le formatage de l'heure. Ajouter une option hour explicite crée un conflit. La même restriction s'applique aux autres options de composants comme minute, second, ou timeZoneName.
Si vous avez besoin de plus de contrôle sur des composants spécifiques, omettez les options de style et configurez les composants individuellement.
const formatter = new Intl.DateTimeFormat("en-US", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
console.log(formatter.format(new Date("2025-03-15T14:30:45")));
// Résultat : "02:30:45 PM"
Vous pouvez utiliser dateStyle et timeStyle ensemble car ils contrôlent différents aspects du formatage. Vous pouvez également les combiner avec des options qui n'entrent pas en conflit, comme timeZone, calendar, ou numberingSystem.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "long",
timeZone: "America/New_York"
});
console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Résultat : "15 mars 2025 à 14:30:45 EST"
Formater les heures selon les paramètres régionaux de l'utilisateur
Utilisez les préférences linguistiques du navigateur pour formater les heures selon les attentes de chaque utilisateur. La propriété navigator.language fournit les paramètres régionaux préférés de l'utilisateur.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "short"
});
const time = new Date("2025-03-15T14:30:00");
console.log(formatter.format(time));
// Le résultat varie selon les paramètres régionaux de l'utilisateur
// Pour en-US: "2:30 PM"
// Pour de-DE: "14:30"
// Pour fr-FR: "14:30"
Vous pouvez également passer le tableau complet navigator.languages pour activer le comportement de repli. Le formateur utilise le premier paramètre régional qu'il prend en charge dans le tableau.
const formatter = new Intl.DateTimeFormat(navigator.languages, {
timeStyle: "medium"
});
Réutiliser les formateurs pour de meilleures performances
La création d'instances Intl.DateTimeFormat implique le traitement des données de paramètres régionaux et des options. Lorsque vous formatez plusieurs fois avec les mêmes paramètres, créez le formateur une seule fois et réutilisez-le.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "short"
});
const times = [
new Date("2025-03-15T09:00:00"),
new Date("2025-03-15T14:30:00"),
new Date("2025-03-15T16:45:00")
];
times.forEach(time => {
console.log(formatter.format(time));
});
// Résultat:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"
Ce modèle améliore les performances lors du formatage de tableaux d'heures ou de l'affichage de nombreux horodatages dans une interface utilisateur.
Ce qu'il faut retenir
L'option timeStyle fournit des niveaux de formatage prédéfinis: "short", "medium", "long" et "full". Chaque niveau représente un équilibre différent entre brièveté et détail. Short affiche les heures et les minutes, medium ajoute les secondes, long ajoute le fuseau horaire abrégé, et full inclut les noms complets des fuseaux horaires.
Utilisez ces préréglages au lieu de configurer manuellement les composants individuels de l'heure. Les préréglages produisent une sortie appropriée pour chaque paramètre régional sans que vous ayez besoin de comprendre les règles de formatage spécifiques à chaque région.
Vous pouvez utiliser timeStyle avec dateStyle mais vous ne pouvez pas le combiner avec des options de composants individuels comme hour ou minute. Choisissez entre les styles prédéfinis pour plus de simplicité ou les composants individuels pour un contrôle plus précis.
Formatez les heures en utilisant les paramètres régionaux de l'utilisateur à partir de navigator.language pour afficher les heures selon les attentes de chaque utilisateur. Réutilisez les instances de formateur lors du formatage de plusieurs heures pour de meilleures performances.