Age

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

Indicates the exact age, in years, between the specified date and today. Designed for past dates, such as birthdates.

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 = age

Required. Specifies the mode as age display.

wfu-format-date = ( no value needed )

Required. However the string itself is not used in this mode.

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