Comment formater les dates en court, moyen, long ou complet

Introduction

Le formatage des dates nécessite de choisir quels composants afficher et comment les afficher. Vous pourriez montrer le jour de la semaine, le nom du mois, le numéro du jour, l'année, les heures, les minutes et le fuseau horaire. Chaque composant dispose 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 un mois numérique, un jour numérique et une année numérique, vous pouvez demander dateStyle: "short". Au lieu de configurer l'affichage des heures, minutes et secondes, vous pouvez demander timeStyle: "medium".

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.

Ce que sont dateStyle et timeStyle

L'option dateStyle contrôle l'apparence des dates. Elle affecte quels composants de date s'affichent et leur niveau de détail. L'option accepte quatre valeurs : "short", "medium", "long" et "full".

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 les mêmes quatre valeurs : "short", "medium", "long" et "full".

Les deux options fournissent des raccourcis 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 le jour de la semaine, le mois, le jour, l'année, l'heure, la minute, la seconde et le nom du fuseau horaire en fonction de la locale.

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

console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"

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 concision et détail. Les styles courts minimisent l'espace en omettant des composants et en utilisant des formats numériques. Les styles complets maximisent la clarté en incluant tous les composants pertinents et en écrivant les mots en toutes lettres.

Le style "short" produit un résultat compact adapté aux espaces restreints. Il utilise généralement des formats numériques et omet les informations supplémentaires comme les noms des jours de la semaine.

Le style "medium" fournit un niveau de détail modéré. Il inclut souvent des noms de mois abrégés et une précision temporelle équilibrée.

Le style "long" ajoute plus de contexte. Il épelle généralement les noms de mois en entier et inclut des composants supplémentaires comme les informations de fuseau horaire.

Le style "full" produit la représentation la plus complète. Il inclut tous les composants pertinents tels que les noms des jours de la semaine, les noms complets des mois et les noms complets des fuseaux horaires.

Les composants exacts et le formatage pour chaque style varient selon la locale. L'anglais américain peut afficher les mois différemment de l'allemand ou du japonais, mais le niveau relatif de détail reste cohérent entre les locales.

Formater les dates avec dateStyle

L'option dateStyle contrôle le formatage des dates. Chaque niveau de style produit un résultat différent pour la même date.

const date = new Date("2025-03-15T14:30:00");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "3/15/25"

console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"

console.log(longFormatter.format(date));
// Output: "March 15, 2025"

console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"

Le style court utilise des valeurs entièrement numériques, ce qui le rend plus compact. Le style moyen abrège le nom du mois. Le style long épelle le mois en entier. Le style complet ajoute le nom du jour de la semaine pour un contexte complet.

Formater les heures avec timeStyle

L'option timeStyle contrôle le formatage de l'heure. Chaque niveau de style affiche différents composants temporels.

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 (short) affiche uniquement les heures et les minutes. Le style moyen (medium) ajoute les secondes. Le style long inclut le fuseau horaire abrégé. Le style complet (full) épelle le nom complet du fuseau horaire.

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 de date varient selon les locales

Chaque locale formate les dates 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:00");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "short"
  });

  const fullFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "full"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Full:  ${fullFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 3/15/25
//   Full:  Saturday, March 15, 2025
// de-DE:
//   Short: 15.03.25
//   Full:  Samstag, 15. März 2025
// fr-FR:
//   Short: 15/03/2025
//   Full:  samedi 15 mars 2025
// ja-JP:
//   Short: 2025/03/15
//   Full:  2025年3月15日土曜日

L'anglais américain utilise l'ordre mois/jour/année. L'allemand utilise jour.mois.année avec des points comme séparateurs. Le français utilise jour/mois/année. Le japonais utilise année/mois/jour avec des caractères kanji. Le style complet ajoute les noms des jours de la semaine dans chaque langue avec le formatage approprié.

Comment les styles d'heure varient selon les locales

Le formatage de l'heure s'adapte également aux conventions de chaque locale. Certaines locales utilisent des horloges de 12 heures avec des indicateurs AM/PM, tandis que d'autres utilisent des horloges de 24 heures.

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 sur le fuseau horaire avec un formatage approprié à chaque locale.

Quand utiliser le style court

Le style court fonctionne mieux lorsque l'espace est limité ou lorsque les dates doivent s'intégrer dans des mises en page compactes. Les interfaces mobiles, les tableaux de données et les affichages compacts bénéficient d'un formatage de date minimal.

Utilisez le style de date court pour afficher des dates dans les colonnes de tableau, les éléments de liste ou partout où l'espace horizontal est limité. Le format numérique prend moins de caractères que les noms de mois ou de jours de la semaine écrits en toutes lettres.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "short"
});

const events = [
  { name: "Team meeting", date: new Date("2025-03-15") },
  { name: "Project deadline", date: new Date("2025-03-28") },
  { name: "Conference", date: new Date("2025-04-05") }
];

events.forEach(event => {
  console.log(`${event.name}: ${formatter.format(event.date)}`);
});

Utilisez le style d'heure court pour afficher les heures dans les plannings, les calendriers ou partout où la précision à la seconde n'est pas nécessaire. La plupart des contextes n'ont besoin que des heures et des minutes.

Quand utiliser le style moyen

Le style moyen équilibre les détails et l'espace. Il fournit plus de contexte que le style court sans la verbosité des styles long ou complet. Cela le rend adapté à la plupart des affichages de date et d'heure à usage général.

Utilisez le style de date moyen lorsque vous disposez d'un espace modéré et que vous souhaitez que les dates soient plus lisibles que les formats purement numériques. Les noms de mois abrégés aident les utilisateurs à identifier les mois plus rapidement que les chiffres.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium"
});

const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"

Utilisez le style d'heure moyen lorsque vous avez besoin d'une précision à la seconde mais que vous souhaitez garder les fuseaux horaires implicites. Cela fonctionne pour afficher des horodatages précis dans les journaux d'application ou les flux d'activité où les utilisateurs comprennent le contexte du fuseau horaire.

Quand utiliser le style long

Le style long fournit des détails supplémentaires sans devenir aussi verbeux que le style complet. Il épelle entièrement les informations tout en omettant les composants supplémentaires comme les noms des jours de la semaine.

Utilisez le style de date long pour les dates importantes qui méritent d'être mises en valeur ou lorsque vous souhaitez que les dates se lisent plus naturellement. Les noms de mois entièrement épelés sont plus faciles à parcourir que les abréviations.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long"
});

const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"

Utilisez le style d'heure long lorsque les informations de fuseau horaire sont importantes. Cela aide les utilisateurs à comprendre quand les événements se sont produits ou se produiront par rapport à leur propre fuseau horaire.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "long",
  timeZone: "America/New_York"
});

const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"

Quand utiliser le style complet

Le style complet produit la représentation de date et d'heure la plus complète. Il inclut tous les composants pertinents, ce qui le rend approprié pour les contextes où la clarté et l'exhaustivité sont plus importantes que l'efficacité spatiale.

Utilisez le style de date complet pour afficher les dates qui nécessitent un contexte maximal. L'ajout du jour de la semaine aide les utilisateurs à placer les dates dans le calendrier hebdomadaire, ce qui est utile pour la planification et la compréhension des relations temporelles.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full"
});

const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"

Utilisez le style d'heure complet lors de l'affichage des heures qui nécessitent un contexte de fuseau horaire complet. Épeler le nom complet du fuseau horaire élimine l'ambiguïté pour les utilisateurs dans différentes régions.

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 singuliers, des messages de confirmation ou partout où les utilisateurs bénéficient de voir un contexte temporel complet.

Comprendre les restrictions

Les options dateStyle et timeStyle ne peuvent pas être utilisées avec des options de composants individuels. Vous devez choisir entre l'utilisation de préréglages de style ou la configuration individuelle des composants.

Ceci ne fonctionnera pas :

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // Erreur : impossible de combiner
});

L'option dateStyle détermine déjà le formatage du jour de la semaine. L'ajout d'une option explicite weekday crée un conflit. La même restriction s'applique à timeStyle avec des options de composants comme hour, minute ou second.

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", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(formatter.format(new Date("2025-03-15")));
// Résultat : "Saturday, March 15, 2025"

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 : "March 15, 2025 at 2:30:45 PM EST"

Formater les dates selon la locale de l'utilisateur

Utilisez les préférences linguistiques du navigateur pour formater les dates 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, {
  dateStyle: "long",
  timeStyle: "short"
});

const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// Le résultat varie selon la locale de l'utilisateur
// Pour en-US : "March 15, 2025 at 2:30 PM"
// Pour de-DE : "15. März 2025 um 14:30"
// Pour fr-FR : "15 mars 2025 à 14:30"

Vous pouvez également passer le tableau complet 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, {
  dateStyle: "medium"
});

Réutiliser les formateurs pour la performance

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium",
  timeStyle: "short"
});

const events = [
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-16T10:00:00"),
  new Date("2025-03-17T16:45:00")
];

events.forEach(date => {
  console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"

Ce modèle améliore les performances lors du formatage de tableaux de dates ou de l'affichage de nombreux horodatages dans une interface utilisateur.

Ce qu'il faut retenir

Les options dateStyle et timeStyle fournissent 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, le format court étant le plus compact et le format complet étant le plus détaillé.

Utilisez ces préréglages au lieu de configurer manuellement les composants individuels de date et d'heure. 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 à la locale.

Vous pouvez utiliser dateStyle et timeStyle ensemble, mais vous ne pouvez pas les combiner avec des options de composants individuels comme weekday ou hour. Choisissez entre les styles prédéfinis pour plus de simplicité ou les composants individuels pour un contrôle plus précis.

Formatez les dates en utilisant la locale de l'utilisateur à partir de navigator.language pour afficher les dates selon les attentes de chaque utilisateur. Réutilisez les instances de formateur lors du formatage de plusieurs dates pour de meilleures performances.