Format Dates ❺
Give your dates the formatting you want
Last updated
Give your dates the formatting you want
Last updated
Webflow supports the storage of dates and datetimes in the CMS, with a wide range of formatting options. However it's missing a few and more complex formats require hacks and javascript to achieve a desired result.
This library allows you to format your dates and times in a huge range of recognized formats.
Webflow offers a range of formats, and you ideally want to choose one that is the most internationally recognizable so that your localization settings do not confuse the parser. The best date format for this is halfway down the list and is shown here.
wfu-format-date attribute ( required )Use wfu-format-date directly on the CMS-bound date field.
The format string depends on the mode ( below ).
The format string describes the date & time format you desire, and the syntax depends on the handler and mode you choose ( see wfu-format-handler and wfu-format-mode, below ).
Currently, the value can be blank for from, to, or age modes.
Format strings are dependent on the handler, however currently Day.js is the only supported date-formatting handler. It supports a wide range of creative formats. Refer to their docs to create the exact formatting string you want;
wfu-format-mode attribute ( optional )Use wfu-format-mode directly on the CMS-bound date field.
These are the modes;
date ( default ) - Indicates we're formatting the data as-is.
from - Indicates the approximate relative timeperiod between the specified date and today, e.g. "10 months ago," or "in 8 days."
to - Indicates the approximate relative timeperiod between today and the specified date. This is the inverse of from.
age - Indicates the exact age, in years, between the specified date and today. Designed for past dates, such as birthdates.
wfu-format-handler attribute ( optional )Use wfu-format-handler directly on the CMS-bound date field.
Handler must be one of;
day or dayjs to use the DayJS library ( default )
moment or momentjs to use the MomentJS library
Currently SA5 supports dayjs for date formatting.
wfu-format-suffix attribute ( optional )Use wfu-format-suffix directly on the CMS-bound date field.
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."
wfu-format-locale attribute ( optional )UNDER DEVELOPMENT
Not yet available publicly.
If specified,
Locale will be determined by the <html lang> attribute in the page
Use with the dayjs processor
Use localized format strings, listed here
Internal;
May be able to preload the lib regardless, and simply allow the locale string to define everything
First, add the library as detailed in Quick Start.
See above for details.
