How to format relative times in Javascript

Introduction

Formatting relative times in JavaScript can be a useful way to present information to the user in a human-readable format. A relative time is a time that is relative to the current time, such as “5 minutes ago” or “3 days from now”.

One of the best tools for formatting relative times in JavaScript is the Intl.RelativeTimeFormat object. This object allows you to specify the language and the style of the relative time, and then use its format() method to format a relative time value.

Examples

To use the Intl.RelativeTimeFormat object, you first need to create an instance of the object and specify the language and the style that you want to use. For example, to create a RelativeTimeFormat object that uses the English language and the long style, you can use the following code:

const timeFormatter = new Intl.RelativeTimeFormat('en', { style: 'long' });

Once you have created the RelativeTimeFormat object, you can use its format() method to format a relative time value. The format() method takes two arguments: the value of the relative time and the unit of time that the value represents (such as “day” or “minute”). For example, to format a relative time of -2 days, you can use the following code:

const relativeTime = timeFormatter.format(-2, 'day');
console.log(relativeTime); // 👉👉 '2 days ago'

The format() method will return a string that represents the relative time in the language and the style that you specified when creating the RelativeTimeFormat object. In the example above, the returned string would be “2 days ago” in English.

Here are some more examples of using the Intl.RelativeTimeFormat object to format relative times in JavaScript:

// Format a relative time of 2 hours in the future
const timeFormatter1 = new Intl.RelativeTimeFormat('en', { style: 'long' });
const relativeTime1 = timeFormatter1.format(2, 'hour');
// Output: "in 2 hours"

// Format a relative time of -1 week in Arabic using the short style
const timeFormatter2 = new Intl.RelativeTimeFormat('ar-SA', { style: 'short' });
const relativeTime2 = timeFormatter2.format(-1, 'week');
// Output: "قبل أسبوع واحد"

// Format a relative time of 5 minutes in the past in Japanese
const timeFormatter3 = new Intl.RelativeTimeFormat('ja', { style: 'long' });
const relativeTime3 = timeFormatter3.format(-5, 'minute');
// Output: "5分前"

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: