JavaScript Academy · Leçon

Formater les dates et les heures

Affichez les dates avec Intl.DateTimeFormat.

Formater les dates et les heures est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Intl.DateTimeFormat

Intl.DateTimeFormat formate les objets Date selon les paramètres régionaux, ce qui évite de construire manuellement des chaînes fragiles.

const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"

Différences entre paramètres régionaux

L’ordre de la date varie selon les régions : US utilise le mois, le jour, puis l’année, tandis qu’une grande partie de l’Europe utilise le jour, le mois, puis l’année.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026

Préréglages de style de date

dateStyle propose les préréglages "full", "long", "medium" et "short" pour obtenir rapidement un affichage lisible.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"

Style de l’heure

timeStyle fonctionne de la même manière pour la partie consacrée à l’heure et peut être combiné avec dateStyle.

const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"

Options personnalisées des composants

Pour un contrôle précis, indiquez séparément des composants comme year, month, day et weekday.

const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"

Formats des mois

month accepte "numeric", "2-digit", "short", "long" et "narrow".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d));  // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"

Format sur 12 ou 24 heures

hour12: true/false remplace le format d’horloge par défaut des paramètres régionaux.

const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"

Fuseaux horaires

Passez un nom IANA à timeZone pour afficher une date dans n’importe quel fuseau, indépendamment du fuseau local de l’environnement d’exécution.

const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));

formatToParts

formatToParts renvoie un tableau de jetons typés, ce qui vous permet de mettre en forme ou de réorganiser chaque élément.

const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));

Formater des intervalles

formatRange(start, end) affiche un intervalle de dates de manière compacte en regroupant les composants communs.

const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"

Calendriers non grégoriens

L’option calendar prend en charge des systèmes comme "islamic", "hebrew" ou "japanese".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));

Vérification rapide

Testez le formatage des dates.

Récapitulatif : dates et heures

Vous avez formaté des dates et des heures avec Intl.DateTimeFormat, utilisé les préréglages dateStyle et timeStyle ainsi que des options détaillées pour les composants, géré les fuseaux horaires et les horloges sur 12 ou 24 heures, puis utilisé formatToParts, les intervalles et d’autres calendriers. Ensuite : le temps relatif et les pluriels.

Questions Fréquemment Posées

La leçon « Formater les dates et les heures » est-elle gratuite ?

Oui — le texte complet de « Formater les dates et les heures » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Formater les dates et les heures » ?

Affichez les dates avec Intl.DateTimeFormat. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Formater les dates et les heures » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy