Comment afficher uniquement les heures, minutes ou secondes ?

Introduction

Les affichages de temps ont souvent besoin de montrer uniquement des composants spécifiques. Un widget d'horloge pourrait n'afficher que les heures et les minutes sans les secondes. Un compte à rebours pourrait n'afficher que les secondes. Une interface de planification pourrait n'afficher que l'heure d'un rendez-vous.

Lorsque vous formatez des heures en utilisant des styles prédéfinis comme timeStyle: "short", vous obtenez un ensemble de composants choisis par la locale. Vous ne pouvez pas supprimer des parties individuelles ou en ajouter des spécifiques. Si le style court inclut les secondes mais que vous ne voulez que les heures et les minutes, le préréglage ne répond pas à vos besoins.

La fonction Intl.DateTimeFormat de JavaScript fournit des options individuelles pour chaque composant temporel. Vous pouvez spécifier exactement quelles parties inclure et comment formater chacune d'elles. Cette leçon explique comment afficher les heures, les minutes et les secondes séparément ou dans des combinaisons spécifiques.

Comprendre les composants temporels

Un temps contient trois composants principaux que vous pouvez formater indépendamment.

L'hour indique quelle heure de la journée. La minute indique quelle minute de l'heure. La second indique quelle seconde de la minute.

Chaque composant accepte des valeurs de formatage qui contrôlent son affichage. Vous n'incluez que les composants dont vous avez besoin dans l'objet d'options.

Formater uniquement les heures

L'option hour affiche le composant heure. Elle accepte deux valeurs.

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});
console.log(numeric.format(time)); // "2 PM"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit'
});
console.log(twoDigit.format(time)); // "02 PM"

La valeur numeric affiche l'heure sans zéros en tête. La valeur 2-digit affiche l'heure avec des zéros en tête lorsque nécessaire.

Pour l'anglais américain, le formateur utilise le format 12 heures avec les indicateurs AM/PM. D'autres locales utilisent différentes conventions, que cette leçon couvrira plus tard.

Formater uniquement les minutes

L'option minute affiche la composante des minutes. Elle accepte deux valeurs.

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  minute: 'numeric'
});
console.log(numeric.format(time)); // "5"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  minute: '2-digit'
});
console.log(twoDigit.format(time)); // "05"

La valeur numeric affiche les minutes sans zéros en tête. La valeur 2-digit affiche les minutes avec des zéros en tête.

L'affichage des minutes seules est moins courant que l'affichage des heures ou des secondes seules. La plupart des affichages de temps combinent les minutes avec les heures.

Formater uniquement les secondes

L'option second affiche la composante des secondes. Elle accepte deux valeurs.

const time = new Date('2025-03-15T14:05:08');

const numeric = new Intl.DateTimeFormat('en-US', {
  second: 'numeric'
});
console.log(numeric.format(time)); // "8"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});
console.log(twoDigit.format(time)); // "08"

La valeur numeric affiche les secondes sans zéros en tête. La valeur 2-digit affiche les secondes avec des zéros en tête.

Cela fonctionne bien pour afficher les secondes écoulées dans un compteur ou pour montrer la partie secondes d'un horodatage.

Combiner heures et minutes

La plupart des affichages de temps montrent à la fois les heures et les minutes. Vous pouvez combiner ces options dans un seul formateur.

const time = new Date('2025-03-15T14:05:00');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(formatter.format(time)); // "2:05 PM"

Le formateur ajoute automatiquement les séparateurs et le formatage appropriés en fonction de la locale. Pour l'anglais américain, cela produit un séparateur deux-points avec un indicateur AM/PM.

Vous ne spécifiez pas le séparateur ou l'ordre. La locale détermine ces détails.

Combiner heures, minutes et secondes

Vous pouvez inclure les trois composants temporels lorsque vous avez besoin d'une précision temporelle complète.

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:05:08 PM"

Cela produit une heure complète avec heures, minutes et secondes. Le formateur gère tous les séparateurs et les conventions de formatage.

Combiner les heures et les secondes sans les minutes

Vous pouvez également combiner les heures et les secondes sans inclure les minutes, bien que ce soit peu courant.

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:08 PM"

Le formateur produit toujours une sortie raisonnable même pour des combinaisons de composants inhabituelles.

Choisir entre le formatage numeric et 2-digit

La différence entre numeric et 2-digit est plus importante pour les valeurs à un seul chiffre.

const earlyTime = new Date('2025-03-15T08:05:03');
const lateTime = new Date('2025-03-15T14:35:48');

const numericFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

const digitFormatter = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});

console.log('Numeric:');
console.log(numericFormatter.format(earlyTime)); // "8:5:3 AM"
console.log(numericFormatter.format(lateTime)); // "2:35:48 PM"

console.log('2-digit:');
console.log(digitFormatter.format(earlyTime)); // "08:05:03 AM"
console.log(digitFormatter.format(lateTime)); // "02:35:48 PM"

Le format numeric omet les zéros non significatifs, produisant des valeurs comme "8:5:3 AM". Le format 2-digit inclut les zéros non significatifs, produisant "08:05:03 AM".

Utilisez 2-digit pour les minutes et les secondes dans la plupart des cas. Cela assure une largeur et un alignement cohérents dans les tableaux, les listes ou les affichages d'horloge numérique. Sans zéros non significatifs, les heures comme "8:5 AM" paraissent irrégulières.

Pour les heures, le choix dépend de votre conception. Les horloges numériques utilisent souvent 2-digit pour la cohérence. Les affichages textuels utilisent souvent numeric pour une apparence plus naturelle.

Comment le formatage des heures varie selon les paramètres régionaux

Différents paramètres régionaux utilisent différentes conventions pour afficher les heures. L'anglais américain utilise le format 12 heures avec les indicateurs AM/PM. De nombreux autres paramètres régionaux utilisent le format 24 heures.

const time = new Date('2025-03-15T14:05:00');

const en = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(en.format(time)); // "2:05 PM"

const de = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(de.format(time)); // "14:05"

const fr = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(fr.format(time)); // "14:05"

const ja = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(ja.format(time)); // "14:05"

L'anglais américain convertit la valeur 24 heures en format 12 heures et ajoute "PM". L'allemand, le français et le japonais utilisent tous le format 24 heures sans indicateurs AM/PM.

Vous spécifiez les mêmes options pour tous les paramètres régionaux. Le formateur applique automatiquement le format d'heure approprié en fonction des conventions régionales.

Comment les séparateurs varient selon les paramètres régionaux

Le séparateur entre les composants temporels varie également selon les paramètres régionaux.

const time = new Date('2025-03-15T14:05:08');
const options = {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(time)); // "2:05:08 PM"

const fi = new Intl.DateTimeFormat('fi-FI', options);
console.log(fi.format(time)); // "14.05.08"

L'anglais américain utilise des deux-points entre les composants. Le finnois utilise des points. Vous ne spécifiez pas le séparateur. Le formateur choisit le séparateur approprié pour chaque paramètre régional.

Quand utiliser des composants temporels individuels

Utilisez des composants temporels individuels lorsque les styles de temps prédéfinis ne correspondent pas à vos besoins.

Si vous voulez les heures et les minutes mais pas les secondes, et que le préréglage timeStyle: "short" inclut des secondes pour votre paramètre régional cible, spécifiez hour et minute individuellement.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

Si vous devez afficher uniquement l'heure pour une horloge ou un horaire simplifié, utilisez uniquement l'option hour.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

Si vous devez afficher les secondes écoulées dans un minuteur ou un compteur, utilisez uniquement l'option second.

const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

Quand utiliser les styles de temps à la place

Si vous avez besoin d'un affichage complet de l'heure et que les styles prédéfinis fonctionnent pour votre locale, utilisez plutôt timeStyle. Les styles prédéfinis sont plus simples et garantissent un formatage cohérent entre les locales.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short'
});

Cela choisit automatiquement les composants et le formatage appropriés sans nécessiter de spécifier des options individuelles.

Utilisez des composants de temps individuels lorsque vous avez besoin d'un contrôle précis sur les parties qui apparaissent. Utilisez les styles de temps lorsque vous souhaitez un formatage standard, adapté à la locale, sans personnalisation.

Cas d'utilisation courants pour des parties spécifiques de l'heure

Affichez uniquement les heures pour les interfaces de planification de rendez-vous où la minute exacte est moins importante ou traitée séparément.

const time = new Date('2025-03-15T14:00:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

console.log(`Meeting at ${formatter.format(time)}`);
// "Meeting at 2 PM"

Affichez les heures et les minutes pour la plupart des widgets d'horloge et des affichages d'heure où la précision à la seconde est inutile.

const time = new Date('2025-03-15T14:05:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

console.log(formatter.format(time));
// "2:05 PM"

Affichez les secondes seules pour les minuteurs de compte à rebours qui montrent les secondes écoulées.

const time = new Date('2025-03-15T00:00:45');
const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

console.log(`${formatter.format(time)} seconds remaining`);
// "45 seconds remaining"

Affichez les heures, les minutes et les secondes pour des horodatages précis dans les journaux ou les pistes d'audit.

const time = new Date('2025-03-15T14:05:08');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});

console.log(`Event logged at ${formatter.format(time)}`);
// "Event logged at 2:05:08 PM"

Restrictions lors de l'utilisation de composants individuels

Vous ne pouvez pas combiner des options de composants temporels individuels comme hour, minute, ou second avec l'option timeStyle. Le préréglage timeStyle détermine déjà quels composants apparaissent et comment ils sont formatés.

Ceci ne fonctionnera pas :

const formatter = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short',
  second: '2-digit'  // Erreur : impossible de combiner
});

Choisissez entre l'utilisation des styles de temps ou la configuration des composants individuels. Vous ne pouvez pas utiliser les deux.

Vous pouvez combiner des options de composants temporels avec des options de composants de date. Cela vous permet d'afficher des parties spécifiques de date et des parties spécifiques de temps ensemble.

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit'
});

const datetime = new Date('2025-03-15T14:05:00');
console.log(formatter.format(datetime));
// "Mar 15, 2:05 PM"

Vous pouvez également combiner des composants temporels avec des options comme timeZone, calendar, ou numberingSystem.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  timeZone: 'America/New_York'
});

const time = new Date('2025-03-15T14:05:00Z');
console.log(formatter.format(time));
// Affiche l'heure convertie au fuseau horaire de New York

Formater les heures selon la locale de l'utilisateur

Utilisez les préférences linguistiques du navigateur pour formater les heures selon les attentes de chaque utilisateur.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const time = new Date('2025-03-15T14:05:00');
console.log(formatter.format(time));
// La sortie varie selon la locale de l'utilisateur
// Pour en-US : "2:05 PM"
// Pour de-DE : "14:05"
// Pour ja-JP : "14:05"

Cela applique automatiquement le format d'heure approprié, les séparateurs et les indicateurs AM/PM en fonction de la locale de chaque utilisateur.

Réutiliser les formateurs pour optimiser les performances

La création d'instances Intl.DateTimeFormat implique le traitement des données de locale et des options. Lorsque vous formatez plusieurs heures avec les mêmes paramètres, créez le formateur une seule fois et réutilisez-le.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const times = [
  new Date('2025-03-15T09:00:00'),
  new Date('2025-03-15T14:30:00'),
  new Date('2025-03-15T18:45:00')
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// Sortie pour en-US :
// "9:00 AM"
// "2:30 PM"
// "6: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

Les options hour, minute et second vous permettent d'afficher des composants spécifiques de l'heure au lieu des heures complètes. Chaque option accepte les valeurs numeric ou 2-digit. La valeur numeric omet les zéros non significatifs. La valeur 2-digit inclut les zéros non significatifs.

Vous pouvez combiner plusieurs options pour afficher exactement les composants dont vous avez besoin. Le formateur gère automatiquement les séparateurs, l'ordre et le formatage en fonction de la locale.

Le formatage de l'heure varie selon la locale. Certaines locales utilisent le format 12 heures avec les indicateurs AM/PM. D'autres utilisent le format 24 heures sans indicateurs. Vous spécifiez les mêmes options pour toutes les locales et le formateur applique les conventions appropriées.

Utilisez les composants individuels de l'heure lorsque vous avez besoin d'un contrôle précis sur les parties qui apparaissent. Utilisez les styles d'heure lorsque vous souhaitez un formatage standard. Vous ne pouvez pas combiner des options de composants individuels avec des options de style d'heure.

Formatez les heures en utilisant la locale 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.