Buy Us a Beer! Community Forum Micro-Consulting

Format Dates ❺

Give your dates the formatting you want

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.

Demonstration

Format Dates
Demo page
LogoFormatting Numbers & Currencies - WebflowFormatting Numbers & Currencies
Demonstration and Cloneable

Usage Notes

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-handler attribute ( optional )

Use wfu-format-handler directly on the CMS-bound date field.

wfu-format-handler = ( handler )

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-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-date attribute ( required )

Use wfu-format-date directly on the CMS-bound date field.

This attribute is required, however the value can be blank for from, to, or age modes. 

wfu-format-date = (format string)

The format string will be the actual formatting string that describes the date & time format you desire. Day.js supports a wide range of creative formats. Refer to their docs to create the exact formatting string you want;

Format strings are dependent on the handler. Currently Day.js is the only supported handler.

https://day.js.org/docs/en/display/format

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."

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.

Last updated