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 pouvez afficher 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 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 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 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.

Que sont dateStyle et timeStyle

L'option dateStyle contrôle l'apparence des dates. Elle affecte les composants de date affichés 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 les composants de temps affichés et leur niveau de détail. L'option accepte les mêmes quatre valeurs : "short", "medium", "long" et "full".

Ces 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 tels que 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 une sortie compacte adaptée aux espaces restreints. Il utilise généralement des formats numériques et omets les informations supplémentaires comme les noms de 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 davantage de contexte. Il écrit 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 de jours de la semaine, les noms de mois complets et les noms de fuseaux horaires complets.

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 de détail relatif reste cohérent d'une locale à l'autre.

Formater les dates avec dateStyle

L'option dateStyle contrôle le formatage des dates. Chaque niveau de style produit une sortie différente 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 toutes les valeurs numériques, ce qui le rend le plus compact. Le style moyen abrège le nom du mois. Le style long écrit 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 affiche uniquement les heures et les minutes. Le style moyen ajoute les secondes. Le style long inclut le fuseau horaire abrégé. Le style complet indique le nom complet du fuseau horaire.

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 sur l'autre.

Comment les styles de date varient selon les paramètres régionaux

Chaque paramètre régional formate les dates 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: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 paramètres régionaux

Le formatage de l'heure s'adapte également aux conventions régionales. Certains paramètres régionaux utilisent des horloges sur 12 heures avec des indicateurs AM/PM, tandis que d'autres utilisent des horloges sur 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 paramètre régional.

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 les dates dans les colonnes de tableau, les éléments de liste ou partout où l'espace horizontal est restreint. 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 ne nécessitent que les heures et les minutes.

Quand utiliser le style moyen

Le style moyen équilibre détail et 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 écrit les informations en toutes lettres tout en omettant les composants supplémentaires comme les noms de 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 écrits en toutes lettres 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 de temps 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 la plus complète de la date et de l'heure. Il inclut tous les composants pertinents, ce qui le rend adapté aux contextes où la clarté et l'exhaustivité importent plus que l'efficacité de l'espace.

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 à situer 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 de temps complet lors de l'affichage d'heures nécessitant un contexte complet de fuseau horaire. L'écriture complète du nom du fuseau horaire élimine toute ambiguïté pour les utilisateurs de 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 uniques, des messages de confirmation ou partout où les utilisateurs bénéficient d'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.

Cela ne fonctionnera pas :

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // Error: cannot combine
});

L'option dateStyle détermine déjà le formatage du jour de la semaine. L'ajout d'une option weekday explicite 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")));
// Output: "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, 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 dates selon les paramètres régionaux 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 les paramètres régionaux préférés 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));
// Output varies by user's locale
// For en-US: "March 15, 2025 at 2:30 PM"
// For de-DE: "15. März 2025 um 14:30"
// For fr-FR: "15 mars 2025 à 14:30"

Vous pouvez également passer l'intégralité du tableau navigator.languages pour activer le comportement de repli. Le formateur utilise les premiers paramètres régionaux qu'il prend en charge dans le tableau.

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

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 dates avec les mêmes paramètres, créez le formateur une 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 concision et détail, short étant le plus compact et full le plus complet.

Utilisez ces préréglages au lieu de configurer manuellement les composants de date et d'heure individuels. 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 aux paramètres régionaux.

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 des styles prédéfinis pour la simplicité ou des composants individuels pour un contrôle précis.

Formatez les dates en utilisant les paramètres régionaux de l'utilisateur depuis 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.