From and To Relative Timespans

SA5 Format Dates. Quick setup for the most popular use cases.

From and To modes display an approximate relative timeperiod between the specified date and today, e.g. "10 months ago," or "in 8 days."

Getting Started

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes

SA5's formatting attributes are element-specific. You simply apply the custom attributes to the date elements you want specially formatted.

The details on the attributes are below.

Usage Notes

Place these attributes directly on element with the date or date-time value you want to format. These can be static strings, or CMS-bound.

For best results, format the string using Webflow's YYYY-MM-DD format option, to ensure the best parsing for Day.js scripts.

wfu-format-mode = ( mode )

Required. Here, valid values for mode are;

• from - indicates Time from Now

• to - indicates Time to Now

Almost always, you will want to use from here. To inverts the time range which has very few practical use cases.

wfu-format-date = ( format string )

Required. Create your format string using any of the Format Strings below.

wfu-format-suffix = ( enable / disable )

Optional. Place directly on the element with the wfu-format-date attribute.

• on ( default ) will apply prefix and suffix text such as "in 3 months", or "3 months ago."

• off will display the raw numeric value only, e.g. "3."

Notes

These attributes are not needed, as the default value is appropriate for this use case;

• wfu-format-mode = date

• wfu-format-handler = dayjs

These attributes are incompatible;

• wfu-format-locale

Format Strings

SA5 supports both pre-defined fully-formatted localized dates, and custom format strings.

Time From Now Formats

Range	Key	Sample Output
0 to 44 seconds	s	a few seconds ago
45 to 89 seconds	m	a minute ago
90 seconds to 44 minutes	mm	2 minutes ago ... 44 minutes ago
45 to 89 minutes	h	an hour ago
90 minutes to 21 hours	hh	2 hours ago ... 21 hours ago
22 to 35 hours	d	a day ago
36 hours to 25 days	dd	2 days ago ... 25 days ago
26 to 45 days	M	a month ago
46 days to 10 months	MM	2 months ago ... 10 months ago
11 months to 17months	y	a year ago
18 months+	yy	2 years ago ... 20 years ago

https://day.js.org/docs/en/display/from-now