# 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](/sa5-format/format-dates/use-cases/custom-format-a-date.md)
* [Show relative time](/sa5-format/format-dates/use-cases/from-and-to-relative-timespans.md) "since" or "until" a date, from today
* [Show age](/sa5-format/format-dates/use-cases/age.md), years in service, years since a business was established
* [Localized dates](/sa5-format/format-dates/use-cases/localize-a-date.md)
## 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](/sa5-format/quick-start.md).
### 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](/sa5-format/format-dates/setup-your-date-field-for-good-parsing.md).
{% 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://attr.sygnal.com/sa5-format/format-dates.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.