Formatting Text in Webflow

Formatting Dates

No items found.
Overview
Formatting Text Elements
Formatting Numbers & Currencies
6:09
210
Truncating Text w/ Ellipsis
220
Isolating Bold & Italic Styles in Headings & Text
4:26
221
Emojis & Line-Breaking
2:28
223
Fitting Text Exactly
224
Highlighting Text
225
Formatting Dates & Times
Formatting Dates
251
Formatting Collection Lists
Comma-Separated List Items
7:15
310
Formatting Rich Text Elements
Formatting Rich Text Elements
410
Formatting CMS-Bound Rich Text Elements
420
Add a Highlighting & Code Effect to Rich Text
7:03
425
Nested Lists in Rich Text Elements
2:37
430
No items found.

Get the Full CMS Date, Time, and Timezone

Do you need to access the exact date & time from your CMS datetime field, to use in javascript, an integration or JSON-LD?

Here's how to get it.

The Problem

When you insert a datetime field into an HTML Embed, it's emitted in an incomplete form;

  • The date is always formatted as MMM DD, YYYY
  • > e.g. Apr 01, 2024
  • The time is stripped
  • The timezone is missing

Unfortunately, this doesn't contain the information you need and it's not in a format that you can use with most systems.

APIs typically require an ISO-8601 datetime format, which looks more like this-

2024-04-01T23:03:04+13:00

This format unambiguously indicates April 1st, 2024, at 11:03 pm and 4 seconds, in the GMT+13 timezone.

HTML Embed Hack

You can solve this, with a bit of a hack;

Notes

Webflow.js uses Moment.js under the hood for its date functions, and this includes the format strings that you see inside of the CMS field embeds.

Adding the Z at the end ensures that the stored timezone is actually represented, e.g. +13:00.

NOTE: Webflow appears to store datetime fields internally in a consistent and unambiguous form. When you render it using the Z timezone specifier above, the datetime will automatically adjust to the timezone that your site is set to in site settings, and will specify that timezone offset, e.g. -04:00.
This is ideal for your scripts and API use, since it expresses a complete and unambiguous time - however using the Z specifier is essential to get that timezone setting automatically. The reason is that Webflow is pre-converting the datetimes to your site's timezone setting prior to the formatting step. If you instead used e.g. +00:00 in the format string, you would get an incorrect datetime, unless your site settings are also set to a +00:00 timezone like [GMT+0:00] Europe/London.

Formatting Dates Visually w/ Multiple Text Parts

For display purposes, you create custom displays using multiple date time parts;

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.