Buy Us a Beer!Community ForumMicro-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

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

Ideally use this date format to ensure correct datetime parsing.

wfu-format-date attribute ( required )

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

wfu-format-date = (format string)

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;

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

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.

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

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