Intro to Time date localisation with Javascript Intl()
Hello there 👋, again !!
Handling date-time is hard and still products around the world are making every effort to maintain the continuity and relativity in the data flow from different time zones.
The Front end world is also writing a lot of polyfills/methods to provide the functionality or the feature their business/users expect. Notable mentions amongst them are —
- Converting the timestamp into user-friendly text.
- Converting the above to a local language.
- Converting to shorthand texts.
Intl.RelativeTimeFormat() is the rescuer for the above cases.
Converting the timestamp into user-friendly text
Assume you have a report/message/order-details/Ticket/Action timestamp data you want to show it to the user. A general timestamp based on ISO spec looks like this 2019–11–12T11:38:02.787Z and is not user-readable. And Ideally, you want to show your user “A Day ago” or “Yesterday” as a readable translation of the above timestamp.
A regular approach would be writing a function to get the current time details, comparison/subtraction and an array of strings like [day, week, month] to convert it into the required form.
The same can be achieved with a few lines —
Converting the above to a local language
In the above change en to the required/local language. Full list of supported languages here.
Converting to shorthand texts
Shorthand conversion of time units is also can be done easily with the help of style options on the Intl.RelativeTimeFormat.
Intl.RelativeTimeFormat(‘en’, { numeric: ‘auto’, style: ‘short’});Browser Support
This feature is relatively new to Chrome and Firefox. Not supported on Edge, IE and, safari (Both Mobile and Desktop). Know about full browser support here.
Hope it is helpful and would like to know your thoughts.
Cheers 🙌
KD
