# Format Dates ❺ 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. Webflow localization also doesn't currently support locale-specific date formatting. SA5 Format allows you to format your dates and times in a huge range of recognized [formats](https://momentjs.com/docs/#/displaying/format/). * Use a format string to explicitly describe the formatting you want, supporting; * Full date-time strings of different arrangements * Full date strings of different arrangements * Partial, custom date or time constructions like "10 Mar" * Display relative-time phrasing as in "10 months ago" or "in 8 days" using the specified date relative to today. You can work with past dates, future dates, or use an "age" mode which shows the number of years elapsed since a date. * Good for "updated" dates on blogs and articles * Good for "years in service" dates on bio pages * Automatic localized formatting is supported, based on the `` attribute which Webflow Localization uses. No matter what locale the user is switched to, your dates will display correctly for them. ## Demonstration {% embed url="" %} Demo page {% endembed %} {% embed url="" %} Demonstration and Cloneable {% endembed %} ## Use Cases SA5 Format has a lot of different settings, which can be used to achieve a lot of different results, and it can be confusing to wade through all of the options. To help make setup easy, here are common setups for popular use cases. * [Custom-format a date](https://attr.sygnal.com/sa5-format/format-dates/use-cases/custom-format-a-date) * [Show relative time](https://attr.sygnal.com/sa5-format/format-dates/use-cases/from-and-to-relative-timespans) "since" or "until" a date, from today * [Show age](https://attr.sygnal.com/sa5-format/format-dates/use-cases/age), years in service, years since a business was established * [Localized dates](https://attr.sygnal.com/sa5-format/format-dates/use-cases/localize-a-date) ## Getting Started {% hint style="success" %} For easiest setup, refer to your specific use case above. {% endhint %} ### STEP 1 - Add the Library First, **add the library** as detailed in [Quick Start](https://attr.sygnal.com/sa5-format/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 This module is built on top of day.js, which is the recognized standard for JS date-time formatting. {% hint style="warning" %} We strongly recommend that you use an ISO-8601 compatible format in the designer to ensure clear, consistent parsing of your dates. [Learn more here](https://attr.sygnal.com/sa5-format/format-dates/setup-your-date-field-for-good-parsing). {% endhint %} ### `wfu-format-date` = ( format string ) **Required.** Place this directly on the element containing your date. The format strings you can use depends on the configuration settings you have specified, especially `wfu-format-mode`, `wfu-format-handler`, and `wfu-format-locale`. ### `wfu-format-mode` = ( mode ) **Optional.** Place directly on the element with the `wfu-format-date` attribute. These are the modes; * `date` ( *default* ) - Indicates we're formatting the data as a full date. * `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. {% hint style="info" %} **FUTURE**\ We're considering use cases for a `rel` relative formatting type which can handle both past and ruture dates and describe them appropriately. {% endhint %} ### `wfu-format-handler` = ( handler ) **Optional.** Place directly on the element with the `wfu-format-date` attribute. Handler must be one of; * `dayjs` or `day` to use the DayJS library ( default ) * ~~`momentjs` or `moment` to use the MomentJS library~~ {% hint style="info" %} **Momentjs** support has been deprecated due to the obsolescence of the library. {% endhint %} ### `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." {% hint style="warning" %} This setting works with **modes** of `from`, `to`, and `age`. {% endhint %} ### `wfu-format-locale` = ( no value ) **Optional.** Place directly on the element with the `wfu-format-date` attribute. If specified, the date will be formatted according to the page's current language locale. This allows your Webflow localized site to have a blog, and to have the dates change depending on which locale the user selects. Locale will be determined by the `` attribute in the page, which is automatically set by Webflow Localization when it is correctly configured. * Use with the `dayjs` processor * Use dayjs [localized format strings](https://day.js.org/docs/en/display/format#localized-formats), listed here {% hint style="warning" %} This settings works with **modes** of `date`. {% endhint %} ## Feature Interoperability SA5 Date Formatting exposes a lot of different options, some of which do not work together; | wfu-format-mode | wfu-format-locale | wfu-format-suffix | | --------------- | ----------------- | ----------------- | | date | Compatible | Not applicable | | from | Not yet supported | Compatible | | to | Not yet supported | Compatible | | age | Not yet supported | Compatible | ## Date Formatting Strings The format string describes the date & time format you desire, and the syntax depends on the **mode** you choose and whether you have localized dates enabled via the **locale** attribute. Here's a breakdown of the different types of format strings you can use; | wfu-format-mode | Non-Localized | Localized | | --------------- | --------------------------- | ---------------------- | | date | Standard Date Formats | Localized Date Formats | | from | Time From Now Formats | n/a | | to | Time From Now Formats | n/a | | age | ( no format string needed ) | n/a | ### Standard Date Formats Use when `wfu-format-mode` = `date`. If `wfu-format-locale` is being used, these should work as well for custom localized date construction. | | | | | ------ | ---------------- | ------------------------------------- | | Format | Output | Description | | `YY` | 18 | Two-digit year | | `YYYY` | 2018 | Four-digit year | | `M` | 1-12 | The month, beginning at 1 | | `MM` | 01-12 | The month, 2-digits | | `MMM` | Jan-Dec | The abbreviated month name | | `MMMM` | January-December | The full month name | | `D` | 1-31 | The day of the month | | `DD` | 01-31 | The day of the month, 2-digits | | `d` | 0-6 | The day of the week, with Sunday as 0 | | `dd` | Su-Sa | The min name of the day of the week | | `ddd` | Sun-Sat | The short name of the day of the week | | `dddd` | Sunday-Saturday | The name of the day of the week | | `H` | 0-23 | The hour | | `HH` | 00-23 | The hour, 2-digits | | `h` | 1-12 | The hour, 12-hour clock | | `hh` | 01-12 | The hour, 12-hour clock, 2-digits | | `m` | 0-59 | The minute | | `mm` | 00-59 | The minute, 2-digits | | `s` | 0-59 | The second | | `ss` | 00-59 | The second, 2-digits | | `SSS` | 000-999 | The millisecond, 3-digits | | `Z` | +05:00 | The offset from UTC, ±HH:mm | | `ZZ` | +0500 | The offset from UTC, ±HHmm | | `A` | AM PM | | | `a` | am pm | | See the full docs- \ ### Time From Now Formats Use when `wfu-format-mode` = `from` or `to`. | 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 | ### Using Localized Date Formats Use when `wfu-format-mode` = `date` and you *have* enabled the `wfu-format-locale` attribute. | Format | English Locale | Sample Output | | ------ | ------------------------- | --------------------------------- | | `LT` | h:mm A | 8:02 PM | | `LTS` | h:mm:ss A | 8:02:18 PM | | `L` | MM/DD/YYYY | 08/16/2018 | | `LL` | MMMM D, YYYY | August 16, 2018 | | `LLL` | MMMM D, YYYY h:mm A | August 16, 2018 8:02 PM | | `LLLL` | dddd, MMMM D, YYYY h:mm A | Thursday, August 16, 2018 8:02 PM | | `l` | M/D/YYYY | 8/16/2018 | | `ll` | MMM D, YYYY | Aug 16, 2018 | | `lll` | MMM D, YYYY h:mm A | Aug 16, 2018 8:02 PM | | `llll` | ddd, MMM D, YYYY h:mm A | Thu, Aug 16, 2018 8:02 PM | Learn more about Day.js [localized date formats](https://day.js.org/docs/en/display/format#list-of-localized-formats). ## Best Practices ### Make Your Dates Unambiguous with ISO8601 Date formats are inherently ambiguous, for example M-D-Y and D-M-Y can easily conflict and confuse scripts. To prevent this, we strongly advise that you choose the ISO8601 date format of `YYYY-MM-DD`. In static date fields, you can simply enter your date in that format as in 2025-03-01 = March 1st 2025. In CMS-bound date fields, you can choose this format by clicking the wrench next to the Date field in the right side settings panel.