Format Dates ❺
Give your dates the formatting you want
Last updated
Was this helpful?
Give your dates the formatting you want
Last updated
Was this helpful?
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 .
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 <html lang> attribute which Webflow Localization uses. No matter what locale the user is switched to, your dates will display correctly for them.
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.
For easiest setup, refer to your specific use case above.
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.
This module is built on top of day.js, which is the recognized standard for JS date-time formatting.
We strongly recommend that you use an ISO-8601 compatible format in the designer to ensure clear, consistent parsing of your dates.
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.
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
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."
This setting works with modes of from, to, and age.
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 <html lang> attribute in the page, which is automatically set by Webflow Localization when it is correctly configured.
Use with the dayjs processor
This settings works with modes of date.
SA5 Date Formatting exposes a lot of different options, some of which do not work together;
date
Compatible
Not applicable
from
Not yet supported
Compatible
to
Not yet supported
Compatible
age
Not yet supported
Compatible
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;
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
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
Use when wfu-format-mode = from or to.
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
Use when wfu-format-mode = date and you have enabled the wfu-format-locale attribute.
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
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.
"since" or "until" a date, from today
, years in service, years since a business was established
First, add the library as detailed in .
.
Use dayjs , listed here
See the full docs-
Learn more about Day.js .
