Comment formater les heures en court, moyen, long ou complet
Utilisez des styles d'heure prédéfinis pour contrôler quels composants d'heure afficher sans les configurer individuellement
Introduction
Le formatage des heures nécessite de choisir quels composants afficher. Vous pouvez afficher les heures et les minutes pour l'heure d'une réunion, ajouter les secondes pour un horodatage précis, ou inclure les 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.
Le Intl.DateTimeFormat de JavaScript fournit des styles prédéfinis qui regroupent des 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 vous formatiez pour l'anglais américain, l'allemand, le japonais ou l'arabe. Cette leçon explique ce que chaque niveau de style fournit et quand utiliser chacun d'eux.
Qu'est-ce que timeStyle
L'option timeStyle contrôle comment les heures apparaissent. Elle affecte quels composants d'heure s'affichent et à quel point ils sont détaillés. L'option accepte quatre valeurs : "short", "medium", "long" et "full".
L'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")));
// Output: "2:30 PM"
Cette option unique remplace ce qui nécessiterait autrement de définir plusieurs options de composants individuelles.
Comprendre les quatre niveaux de style
Chaque niveau de style représente un équilibre différent entre concision et détail. Les styles courts minimisent l'espace en affichant uniquement les composants essentiels. Les styles complets maximisent la clarté en incluant tous les composants pertinents comme les noms de fuseaux horaires.
Le style "short" produit une sortie compacte affichant les heures et les minutes. Il omets les secondes et les informations de fuseau horaire, ce qui le rend adapté à la plupart des besoins d'affichage de l'heure au quotidien.
Le style "medium" ajoute les secondes pour fournir plus de précision. Il omets toujours les informations de fuseau horaire mais donne l'heure exacte à la seconde près.
Le style "long" ajoute les informations de fuseau horaire abrégées. Il inclut les heures, les minutes, les secondes et un code de fuseau horaire court 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 entièrement écrit, 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 d'une locale à l'autre.
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 le 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 écrit le nom complet du fuseau horaire pour une clarté maximale.
Combiner dateStyle et timeStyle
Vous pouvez utiliser les deux options ensemble pour formater des horodatages complets. Le formateur applique les deux styles de manière indépendante.
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 de date détaillé 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 de styles vous permet de mettre l'accent sur un aspect plutôt que l'autre.
Comment les styles d'heure varient selon les paramètres régionaux
Chaque paramètre régional formate les heures selon ses propres conventions. Le même style produit un résultat différent pour différents paramètres régionaux, mais le niveau de détail relatif 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 paramètre régional.
Ces différences reflètent les conventions de chaque culture pour l'affichage de l'heure. L'API gère ces variations automatiquement en fonction de l'identifiant de paramètre régional.
Quand utiliser le style court
Le style court fonctionne mieux pour la plupart des affichages d'heure quotidiens. Il affiche les informations dont les utilisateurs ont généralement besoin sans encombrer l'interface avec les secondes ou les 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 au niveau de 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 adapté aux contextes où le timing exact est important mais où le fuseau horaire est compris par le contexte.
Utilisez le style d'heure moyen lors de l'affichage d'horodatages précis dans les journaux d'application, les fils 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: "User logged in", time: new Date("2025-03-15T09:15:23") },
{ action: "File uploaded", time: new Date("2025-03-15T09:18:47") },
{ action: "Settings updated", time: new Date("2025-03-15T09:22:11") }
];
activities.forEach(activity => {
console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});
// Output:
// User logged in: 9:15:23 AM
// File uploaded: 9:18:47 AM
// Settings updated: 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 fournit le style court 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 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 un espace excessif.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const events = [
{ name: "Webinar starts", time: new Date("2025-03-15T14:00:00") },
{ name: "Registration closes", time: new Date("2025-03-15T13:30:00") }
];
events.forEach(event => {
console.log(`${event.name}: ${formatter.format(event.time)}`);
});
// Output:
// Webinar starts: 2:00:00 PM EST
// Registration closes: 1:30:00 PM EST
Les applications internationales, les outils de planification pour équipes distribuées et les plateformes de coordination d'événements bénéficient du style long. Le code de fuseau horaire élimine toute ambiguïté sur le fuseau horaire que représente l'heure.
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 clarté et efficacité d'espace.
Quand utiliser le style complet
Le style complet produit la représentation d'heure la plus complète. Il épelle le nom complet du fuseau horaire, éliminant toute ambiguïté sur le fuseau horaire que représente l'heure.
Utilisez le style de temps complet lors de l'affichage d'heures nécessitant une clarté maximale. Écrire le nom complet du fuseau horaire aide les utilisateurs de 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));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
Le style complet fonctionne bien pour afficher des événements importants uniques, 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 de planification formelles bénéficient de ce niveau de détail.
Les documents juridiques sensibles au temps, les dossiers 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 de temps individuels. Vous devez choisir entre utiliser des préréglages de style ou configurer les composants individuellement.
Cela ne fonctionnera pas :
const formatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium",
hour: "2-digit" // Error: cannot combine
});
L'option timeStyle détermine déjà le formatage des heures. 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")));
// Output: "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, telles que 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")));
// Output: "March 15, 2025 at 2:30:45 PM EST"
Formater les heures pour la locale 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 la locale préférée 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));
// Output varies by user's locale
// For en-US: "2:30 PM"
// For de-DE: "14:30"
// For fr-FR: "14:30"
Vous pouvez également passer l'intégralité du tableau navigator.languages pour activer le comportement de repli. Le formateur utilise la première locale qu'il prend en charge dans le tableau.
const formatter = new Intl.DateTimeFormat(navigator.languages, {
timeStyle: "medium"
});
Réutiliser les formateurs pour les performances
La création d'instances Intl.DateTimeFormat implique le traitement des données de locale et des options. Lors du formatage multiple avec les mêmes paramètres, créez le formateur une 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));
});
// Output:
// "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 concision 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 de temps individuels. Les préréglages produisent une sortie appropriée pour chaque locale sans que vous ayez besoin de comprendre les règles de formatage spécifiques à chaque locale.
Vous pouvez utiliser timeStyle avec dateStyle mais ne pouvez pas le combiner avec des options de composants individuels comme hour ou minute. Choisissez entre les styles prédéfinis pour la simplicité ou les composants individuels pour un contrôle précis.
Formatez les heures en utilisant la locale de l'utilisateur depuis 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.