Comment afficher uniquement certaines parties d'une date ?

Introduction

Les formats de date complets comme « mardi 15 octobre 2024 » fonctionnent bien dans certains contextes, mais vous devez souvent afficher uniquement certaines parties d'une date. Vous pourriez vouloir afficher uniquement le mois et l'année pour une date de publication, uniquement le jour de la semaine pour un calendrier, ou uniquement le jour et le mois pour un anniversaire.

Le Intl.DateTimeFormat de JavaScript fournit des options individuelles pour chaque composant de date. Au lieu de choisir un style prédéfini comme « full » ou « short », vous spécifiez exactement quelles parties inclure et comment formater chacune d'elles.

Comprendre les composants de date

Une date contient quatre composants principaux que vous pouvez formater indépendamment.

Le weekday indique quel jour de la semaine il s'agit. Le year indique quelle année. Le month indique quel mois de l'année. Le day indique quel jour du mois.

Chaque composant accepte différentes valeurs de formatage qui contrôlent son affichage. Vous incluez uniquement les composants dont vous avez besoin dans l'objet d'options.

Formater le jour de la semaine

L'option weekday affiche le jour de la semaine. Elle accepte trois valeurs qui contrôlent la longueur de la sortie.

const date = new Date('2024-10-15');

const narrow = new Intl.DateTimeFormat('en-US', {
  weekday: 'narrow'
});
console.log(narrow.format(date)); // "T"

const short = new Intl.DateTimeFormat('en-US', {
  weekday: 'short'
});
console.log(short.format(date)); // "Tue"

const long = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});
console.log(long.format(date)); // "Tuesday"

La valeur narrow produit une seule lettre. La valeur short produit un nom abrégé. La valeur long produit le nom complet du jour de la semaine.

Deux jours de la semaine peuvent avoir le même style étroit dans certaines locales. Par exemple, mardi et jeudi commencent tous deux par « T » en anglais.

Formater l'année

L'option year affiche l'année. Elle accepte deux valeurs.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  year: 'numeric'
});
console.log(numeric.format(date)); // "2024"

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

La valeur numeric affiche l'année complète. La valeur 2-digit affiche uniquement les deux derniers chiffres.

Formater le mois

L'option month affiche le mois de l'année. Elle accepte cinq valeurs qui fournissent différents niveaux de détail.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  month: 'numeric'
});
console.log(numeric.format(date)); // "10"

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

const narrow = new Intl.DateTimeFormat('en-US', {
  month: 'narrow'
});
console.log(narrow.format(date)); // "O"

const short = new Intl.DateTimeFormat('en-US', {
  month: 'short'
});
console.log(short.format(date)); // "Oct"

const long = new Intl.DateTimeFormat('en-US', {
  month: 'long'
});
console.log(long.format(date)); // "October"

La valeur numeric affiche le mois sous forme de nombre sans zéros non significatifs. La valeur 2-digit affiche le mois sous forme de nombre avec zéros non significatifs. La valeur narrow produit une seule lettre. La valeur short produit un nom de mois abrégé. La valeur long produit le nom complet du mois.

Deux mois peuvent avoir le même style étroit dans certaines locales. Par exemple, mars et mai commencent tous deux par « M » en anglais.

Formater le jour

L'option day affiche le jour du mois. Elle accepte deux valeurs.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  day: 'numeric'
});
console.log(numeric.format(date)); // "15"

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

La valeur numeric affiche le jour sans zéros non significatifs. La valeur 2-digit affiche le jour avec zéros non significatifs.

Pour les jours à un seul chiffre, numeric produit des valeurs comme « 5 » tandis que 2-digit produit « 05 ».

Combiner plusieurs parties de date

Vous pouvez spécifier plusieurs options dans un seul formateur pour afficher exactement la combinaison dont vous avez besoin.

const date = new Date('2024-10-15');

// Month and year only
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// Weekday and day only
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// Month and day only
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// All components with custom formatting
const custom = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit'
});
console.log(custom.format(date)); // "Tuesday, Oct 15, 2024"

Le formateur organise automatiquement les composants selon les conventions de la locale. Vous n'avez pas à vous soucier de l'ordre ou de la ponctuation.

Fonctionnement des options selon les locales

Les mêmes options produisent des résultats différents selon les locales. Chaque locale suit ses propres conventions pour l'ordre et le formatage des parties de date.

const date = new Date('2024-10-15');
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024"

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024"

const ja = new Intl.DateTimeFormat('ja-JP', options);
console.log(ja.format(date)); // "2024年10月15日"

const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date)); // "١٥ أكتوبر ٢٠٢٤"

L'allemand place le jour en premier et utilise un point comme séparateur. Le japonais utilise l'ordre année-mois-jour avec des caractères japonais. L'arabe utilise l'écriture arabe pour le nom du mois et les chiffres.

Les noms des jours de la semaine et des mois changent également en fonction de la locale.

const date = new Date('2024-10-15');
const options = {
  weekday: 'long',
  month: 'long'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "Tuesday, October"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "mardi octobre"

const es = new Intl.DateTimeFormat('es-ES', options);
console.log(es.format(date)); // "martes, octubre"

Le français utilise des minuscules pour les noms de jours et de mois. L'espagnol utilise également des minuscules mais inclut une virgule comme séparateur.

Cas d'usage courants

L'affichage du mois et de l'année convient bien pour les dates de publication et les listes d'archives.

const date = new Date('2024-10-15');

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

console.log(`Published: ${formatter.format(date)}`);
// "Published: October 2024"

L'affichage des noms de jours de la semaine convient bien pour les calendriers et les plannings.

const date = new Date('2024-10-15');

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

console.log(`Event on ${formatter.format(date)}`);
// "Event on Tuesday"

L'affichage du mois et du jour sans l'année convient bien pour les anniversaires et les événements annuels.

const date = new Date('2024-10-15');

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

console.log(`Birthday: ${formatter.format(date)}`);
// "Birthday: October 15"

Résumé

L'objet d'options Intl.DateTimeFormat vous permet d'afficher des parties spécifiques d'une date au lieu de la date complète. L'option weekday accepte narrow, short ou long. L'option year accepte numeric ou 2-digit. L'option month accepte numeric, 2-digit, narrow, short ou long. L'option day accepte numeric ou 2-digit.

Vous pouvez combiner plusieurs options pour afficher exactement les parties dont vous avez besoin. Le formateur gère automatiquement l'ordre et la ponctuation en fonction de la locale. Différentes locales utilisent différentes conventions pour afficher les mêmes composants de date.