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()etformatRange().
Exemple
#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))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
#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, notammentdateStyle,timeStyle,weekday,year,month,day,hour,minuteettimeZone.
Plus d’exemples
#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}`)
}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))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))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
#- DateUn objet représentant un instant précis, avec des méthodes pour lire et modifier la date et l’heure.
- Intl.NumberFormatFormate des nombres selon les règles d’une langue donnée : séparateurs, devises, pourcentages et unités.
- String.prototype.localeCompare()Compare deux chaînes selon les règles d’une langue. Renvoie un nombre négatif, zéro ou un nombre positif, idéal pour trier.
- Intl.RelativeTimeFormatFormate un temps relatif dans la langue choisie, par ex. « dans 3 jours », « il y a 2 heures » ou « hier ».
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.