Intl. RelativeTimeFormat
Formate un temps relatif dans la langue choisie, par ex. « dans 3 jours », « il y a 2 heures » ou « hier ».
- Renvoie
- Un objet formateur avec les méthodes
format()etformatToParts().
Exemple
#const rtf = new Intl.RelativeTimeFormat('fr-FR')
console.log(rtf.format(-1, 'day'))
console.log(rtf.format(3, 'day'))
console.log(rtf.format(-2, 'hour'))
console.log(rtf.format(-5, 'minute'))Définition et utilisation
#Intl.RelativeTimeFormat transforme un nombre et une unité de temps en description naturelle. format(-2, "hour") donne « il y a 2 heures », et format(3, "day") donne « dans 3 jours ». Un nombre négatif indique le passé, un nombre positif le futur. Le formateur choisit lui-même la forme correcte des mots dans la langue donnée.
Les unités disponibles sont "second", "minute", "hour", "day", "week", "month", "quarter" et "year". L’option numeric: "auto" permet d’utiliser des mots plutôt que des nombres quand la langue en a : « hier », « aujourd’hui », « demain », « la semaine prochaine ». L’option style, avec les valeurs "long", "short" et "narrow", raccourcit le texte, par ex. en « dans 3 h ».
Le formateur ne calcule pas la différence entre des dates. C’est vous qui calculez le nombre de secondes, de minutes ou de jours écoulés, et qui choisissez l’unité. C’est en général une courte fonction qui s’en charge, en vérifiant l’ampleur de la différence et en choisissant la plus grande unité sensée, comme dans l’exemple du temps depuis une publication ci-dessous.
Syntaxe
#new Intl.RelativeTimeFormat(locales)
new Intl.RelativeTimeFormat(locales, options)
formatter.format(value, unit)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 :numeric("always"ou"auto") etstyle("long","short"ou"narrow").
Plus d’exemples
#const rtf = new Intl.RelativeTimeFormat('fr-FR', { numeric: 'auto' })
for (const days of [-2, -1, 0, 1, 2]) {
console.log(rtf.format(days, 'day'))
}
console.log(rtf.format(1, 'week'))
console.log(rtf.format(-3, 'day'))Le français a des mots particuliers pour l’avant-veille et le surlendemain. Au-delà de deux jours dans un sens ou dans l’autre, le formateur revient à la forme numérique.
const rtf = new Intl.RelativeTimeFormat('fr-FR', { numeric: 'auto' })
function timeAgo(date, now) {
const seconds = Math.round((date - now) / 1000)
const units = [
['day', 86400],
['hour', 3600],
['minute', 60]
]
for (const [unit, size] of units) {
if (Math.abs(seconds) >= size) {
return rtf.format(Math.round(seconds / size), unit)
}
}
return rtf.format(seconds, 'second')
}
const now = new Date('2026-09-29T12:00:00Z')
console.log(timeAgo(new Date('2026-09-29T11:15:00Z'), now))
console.log(timeAgo(new Date('2026-09-29T07:00:00Z'), now))
console.log(timeAgo(new Date('2026-09-28T09:00:00Z'), now))
console.log(timeAgo(new Date('2026-09-29T11:59:50Z'), now))const short = new Intl.RelativeTimeFormat('fr-FR', { style: 'short' })
const en = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' })
console.log(short.format(3, 'hour'))
console.log(short.format(-2, 'month'))
console.log(en.format(-1, 'day'))
console.log(en.format(2, 'week'))Compatibilité des navigateurs
#Largement disponible · depuis 2020
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Activez
numeric: "auto"pour afficher naturellement « hier » plutôt que « il y a 1 jour », et « demain » plutôt que « dans 1 jour ». - Surveillez le signe du nombre : une valeur négative est le passé (« il y a »), une valeur positive est le futur (« dans »). Soustraire les dates dans le mauvais ordre est l’erreur la plus fréquente.
- Pour des échéances précises, comme la date de rendu d’un projet, utilisez
Intl.DateTimeFormat. Le temps relatif convient surtout aux événements récents : notifications, commentaires et activité des amis.
Entrées associées
#- Intl.DateTimeFormatFormate les dates et les heures selon les règles d’une langue et d’un fuseau horaire choisis.
- DateUn objet représentant un instant précis, avec des méthodes pour lire et modifier la date et l’heure.
- Intl.PluralRulesChoisit la bonne forme grammaticale d’un mot selon un nombre, dans la langue choisie. En français : 0 leçon, 1 leçon, 2 leçons.
- Intl.NumberFormatFormate des nombres selon les règles d’une langue donnée : séparateurs, devises, pourcentages et unités.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.