Is Internationalization Date package a replacement for Moment.js & Date-Fns?

[deadcoder0904]

Same.

[devongovett]

Yes. It is similar to other date libraries, but focused on internationalization (i.e. working with different calendar systems, time zones, etc.). These use cases are not typically covered by other libraries. If you're curious, I'm currently working on the documentation here.

[barbinbrad]

I'd like our company to move to @internationalized/date -- but one of the big push-backs has been on formatting. For example converting a ZonedDateTime to a string like 3 minutes ago. date-fns seems to excel here. But from my perspective, this is the trivial part of a date time library.

Two questions:

1. Is this type of formatting something you'd be interested in adding to the @internationalized/date package?
2. How would you go about implementing the different translations. For example.

[devongovett]

For formatting, you should use the native browser date formatting APIs. Using these means there is no hit to bundle size, and you get full internationalization capabilities.

To format dates and times, use Intl.DateTimeFormat.

To format relative times, use Intl.RelativeTimeFormat.

You can format one of the date objects from @internationalized/date by first converting it to a native JS Date object. For example, with a ZonedDateTime, there is a toDate() method.

[barbinbrad]

Awesome! Thanks for sharing that. So if I'm reading this correctly, the format method of Intl.RelativeTimeFormat still needs a transform step to go from date to an argument like this (-3, 'days')? Does something like this exist already in @internationalized/date?

const formatter = new Intl.RelativeTimeFormat(undefined, {
  numeric: 'auto'
})

const DIVISIONS = [
  { amount: 60, name: 'seconds' },
  { amount: 60, name: 'minutes' },
  { amount: 24, name: 'hours' },
  { amount: 7, name: 'days' },
  { amount: 4.34524, name: 'weeks' },
  { amount: 12, name: 'months' },
  { amount: Number.POSITIVE_INFINITY, name: 'years' }
]

function formatTimeAgo(date) {
  let duration = (date - new Date()) / 1000

  for (let i = 0; i <= DIVISIONS.length; i++) {
    const division = DIVISIONS[i]
    if (Math.abs(duration) < division.amount) {
      return formatter.format(Math.round(duration), division.name)
    }
    duration /= division.amount
  }
}

[devongovett]

At the moment, there is nothing built in for that. Ideally, this would use the calendar system to do this rather than hard coding the number of months/weeks etc. In the meantime, you could easily use the above function by converting to JS date objects.

[rostero1]

Do you have an example of what this would look like with @internationalized/date or has there been an update to add relative time (or to get the difference between two dates)?