Using Intl.RelativeTimeFormat for Localized Relative Timings

[giscus[bot]]

Using Intl.RelativeTimeFormat for Localized Relative Timings

A look at how to format relative times in JavaScript

https://www.raymondcamden.com/2024/03/07/using-intlrelativetimeformat-for-localized-relative-timings

[robertz]

I do love Intl, I have leveraged it quite a bit recently for locale specific numeric formatting. Admittedly, I have not used the date/time formatting.

When I want to continually update times on an item i will generally set a data-ts node on the element and update the displayed value every 60 seconds or so using moment.js

	const showtime = () => {
		let displays = [... document.querySelectorAll('[data-ts]')]
		displays.forEach(ele => {
			ele.textContent = new moment.unix(ele.dataset.ts).fromNow()
			ele.title = new moment.unix(ele.dataset.ts).local().format('dddd, MMMM Do YYYY, h:mm:ss a')
		})

		ts_interval = window.setInterval(() => {
			let displays = [... document.querySelectorAll('[data-ts]')]
			displays.forEach(ele => {
				ele.textContent = new moment.unix(ele.dataset.ts).fromNow()
			})
		}, 60000)
	}

Might be fun to see if I can get the same thing working with Intl

[cfjedimaster]

You earn extra credit for using data attributes. And - I just added it to my CodeBreak list of topics. :)

[kapouer]

Wonderful ! That's basically what I did, some time ago:
https://github.com/kapouer/duration-relativetimeformat

Please submit PR if you see how to improve it !