Intl.DateTimeFormat

Formate les dates et les heures selon les règles d’une langue et d’un fuseau horaire choisis.

Renvoie
Un objet formateur avec les méthodes format(), formatToParts() et formatRange().
Sur cette page

Exemple

#
JavaScript
const lesson = new Date(Date.UTC(2026, 8, 28, 10, 30))

const full = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'full', timeZone: 'UTC' })
const short = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'short', timeZone: 'UTC' })

console.log(full.format(lesson))
console.log(short.format(lesson))
Console
lundi 28 septembre 2026
28/09/2026

Définition et utilisation

#

Intl.DateTimeFormat transforme un objet Date en texte lisible, par exemple « lundi 28 septembre 2026 » ou « 28/09/2026 ». Il choisit lui-même les noms des mois et des jours dans la langue choisie, leur forme correcte et l’ordre des composants.

Le plus simple est d’utiliser les options dateStyle et timeStyle avec les valeurs "full", "long", "medium" ou "short". Quand vous avez besoin de plus de contrôle, indiquez des composants isolés : weekday, year, month, day, hour, minute. Vous ne pouvez pas les combiner avec dateStyle ni timeStyle.

L’option timeZone définit le fuseau horaire dans lequel afficher la date, par ex. "Europe/Paris" ou "UTC". Sans elle, le formateur utilise le fuseau de l’utilisateur, donc le même instant s’affiche différemment en France et au Japon. Les exemples de cette page indiquent toujours le fuseau explicitement, pour que le résultat soit toujours identique.

Syntaxe

#
Syntaxe
new Intl.DateTimeFormat(locales)
new Intl.DateTimeFormat(locales, options)

formatter.format(date)

Paramètres

#
  • locales

    optionnel, chaîne ou tableau

    Un code de langue, par ex. "fr-FR" ou "en-US". Omis, il correspond à la langue du navigateur.
  • options

    objet optionnel

    Des réglages, notamment dateStyle, timeStyle, weekday, year, month, day, hour, minute et timeZone.

Plus d’exemples

#
Le même instant dans différents fuseaux
JavaScript
const liveLesson = new Date(Date.UTC(2026, 8, 28, 10, 30))
const zones = ['Europe/Paris', 'Asia/Tokyo', 'America/New_York']

for (const timeZone of zones) {
  const time = new Intl.DateTimeFormat('fr-FR', { timeStyle: 'short', timeZone }).format(liveLesson)
  console.log(`${timeZone}: ${time}`)
}
Console
Europe/Paris: 12:30
Asia/Tokyo: 19:30
America/New_York: 06:30
Composants choisis de la date
JavaScript
const date = new Date(Date.UTC(2026, 8, 28, 10, 30))

const weekday = new Intl.DateTimeFormat('fr-FR', { weekday: 'long', timeZone: 'UTC' })
const dayMonth = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'long', timeZone: 'UTC' })
const time = new Intl.DateTimeFormat('fr-FR', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' })

console.log(weekday.format(date))
console.log(dayMonth.format(date))
console.log(time.format(date))
Console
lundi
28 septembre
10:30
Autres langues
JavaScript
const date = new Date(Date.UTC(2026, 8, 28))
const options = { dateStyle: 'full', timeZone: 'UTC' }

console.log(new Intl.DateTimeFormat('en-US', options).format(date))
console.log(new Intl.DateTimeFormat('de-DE', options).format(date))
Console
Monday, September 28, 2026
Montag, 28. September 2026

Compatibilité des navigateurs

#

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

  • Chrome
  • Edge
  • Firefox
  • Safari

Bonnes pratiques

#
  • Si tous les utilisateurs doivent voir la même heure (par ex. l’échéance d’un événement en France), indiquez timeZone: "Europe/Paris".
  • Créez le formateur une seule fois et réutilisez-le, par ex. en affichant une liste de messages avec des dates.
  • Pour un texte du type « hier » ou « dans 3 jours », utilisez Intl.RelativeTimeFormat, qui lui est associé.

Entrées associées

#

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.