Comment afficher uniquement les heures, minutes ou secondes ?

Introduction

Les affichages temporels nécessitent souvent de montrer uniquement des composants spécifiques. Un widget d'horloge peut afficher uniquement les heures et minutes sans les secondes. Un compte à rebours peut afficher uniquement les secondes. Une interface de planification peut afficher uniquement 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 voulez uniquement les heures et minutes, le style prédéfini ne répond pas à vos besoins.

Le 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, minutes et secondes séparément ou dans des combinaisons spécifiques.

Comprendre les composants temporels

Une heure contient trois composants principaux que vous pouvez formater indépendamment.

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

Chaque composant accepte des valeurs de formatage qui contrôlent son affichage. Vous incluez uniquement 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 initiaux. La valeur 2-digit affiche l'heure avec des zéros initiaux si nécessaire.

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

Formater uniquement les minutes

L'option minute affiche le composant 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 non significatifs. La valeur 2-digit affiche les minutes avec des zéros non significatifs.

Afficher uniquement les minutes est moins courant que d'afficher les heures ou les secondes seules. La plupart des affichages de temps combinent les minutes avec les heures.

Formater uniquement les secondes

L'option second affiche le composant 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 non significatifs. La valeur 2-digit affiche les secondes avec des zéros non significatifs.

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

Combiner les heures et les 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 ni l'ordre. La locale détermine ces détails.

Combiner les heures, les minutes et les secondes

Vous pouvez inclure les trois composants de temps 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 un temps complet avec les heures, les minutes et les 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 cela 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 un résultat raisonnable même pour des combinaisons de composants inhabituelles.

Choisir entre le formatage numérique et à 2 chiffres

La différence entre numeric et 2-digit est surtout 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 omit les zéros initiaux, produisant des valeurs comme "8:5:3 AM". Le format 2-digit inclut les zéros initiaux, produisant "08:05:03 AM".

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

Pour les heures, le choix dépend de votre design. 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 la locale

Différentes locales utilisent différentes conventions pour afficher les heures. L'anglais américain utilise le format 12 heures avec des indicateurs AM/PM. De nombreuses autres locales 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 toutes les locales. Le formateur applique automatiquement le format d'heure approprié en fonction des conventions de la locale.

Comment les séparateurs varient selon la locale

Le séparateur entre les composants temporels varie également selon la locale.

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 locale.

Quand utiliser les composants de temps individuels

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

Si vous souhaitez afficher les heures et les minutes mais pas les secondes, et que le style prédéfini timeStyle: "short" inclut les secondes pour votre locale 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 planning 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 de temps complet et que les styles prédéfinis fonctionnent pour votre locale, utilisez timeStyle à la place. 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 les 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 et adapté à la locale sans personnalisation.

Cas d'usage courants pour des parties de temps spécifiques

Affichez uniquement les heures pour les interfaces de planification de rendez-vous où la minute exacte est moins importante ou géré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 de temps où la précision à la seconde n'est pas nécessaire.

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 uniquement les secondes pour les minuteurs à rebours qui affichent 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 les 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.

Cela ne fonctionnera pas :

const formatter = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short',
  second: '2-digit'  // Error: cannot combine
});

Choisissez entre l'utilisation de styles temporels ou la configuration de 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 de date spécifiques et des parties temporelles spécifiques 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));
// Displays time converted to New York timezone

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.

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));
// Output varies by user's locale
// For en-US: "2:05 PM"
// For de-DE: "14:05"
// For ja-JP: "14:05"

Cela applique automatiquement le format d'heure approprié, les séparateurs et les indicateurs AM/PM en fonction des paramètres régionaux de chaque utilisateur.

Réutiliser les formateurs pour améliorer les performances

La création d'instances Intl.DateTimeFormat implique le traitement des données de paramètres régionaux et des options. Lors du formatage de plusieurs heures avec les mêmes paramètres, créez le formateur une 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));
});
// Output for 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 temporels spécifiques au lieu d'heures complètes. Chaque option accepte les valeurs numeric ou 2-digit. La valeur numeric omit 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 des heures varie selon la locale. Certaines locales utilisent le format 12 heures avec des 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 temporels 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. Vous ne pouvez pas combiner les options de composants individuels avec les options de style de temps.

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.