Date: Add function to get relative time

[swissspidy]

Is your feature request related to a problem? Please describe.

@wordpress/date, powered by Moment.js under the hood, is a neat and simple way to format dates. However, what currently is missing is a way to display relative times like human_time_diff() does in PHP.

Describe the solution you'd like

Moment.js has a function called fromNow() (docs) that allows you to display relative times like "4 years ago" or "44 seconds ago", and a similar from() function to display a moment in relation to a time other than now.

A new function similar to human_time_diff() could be added to the package that makes use of these functions.

Happy to work on a PR to add this kind of functionality.

Describe alternatives you've considered

Alternatives would be using Moment.js directly and not via @wordpress/date, or using a dedicated library like timeago.js

[iandunn]

I'd find this functionality useful.

Alternatives would be using Moment.js directly and not via @wordpress/date

That's a fair point, though; I guess the benefit of having a wrapper would be to abstract away Moment in case we want to replace it w/ another library in the future? Are there other pros/cons to consider?

...or using a dedicated library like timeago.js

What would the benefits of that be? At a quick glance, it seems like standardizing on Moment would be more performant and maintainable than adding a separate library.

[swissspidy]

I listed these two alternatives as options for someone who needs this kind of functionality but finds out that @wordpress/date lacks it.

Since that package already uses Moment.js it definitely makes sense to use that one for this enhancement as well.

[iandunn]

👍

For anyone looking to use Moment directly in the meantime, here's an example:

/**
 * External dependencies
 */
import moment from 'moment';

// ...

render() {
	const { exampleTime } = this.props(); // a timestamp in milliseconds, or something else parseable by Moment
	
	return (
		<span>
			It happened { moment( exampleTime ).fromNow() }.
		</span>
	)
}

[swissspidy]

Thanks for sharing the example!

The nice thing about using the date package for that would be that one would automatically benefit from the existing localization in WordPress. See also #16728.

[TimothyBJacobs]

This has come up again in the block directory. Right now we are returning a human_time_diff from the REST API, but ideally we'd just return the raw date value and Gutenberg would transform this client side.

[swissspidy]

humanTimeDiff now exists