Webflow Localization

Localizing Dates

Overview
Known Localization Limitations & Bugs
001
Supported Languages
010
Tips & Techniques
Choosing the Right Locales
100
Localizing an Already-Localized Site
101
Localizing Dates
102
Localizing CMS Option Fields
103
Localizing Numbers & Currencies
104
Locale-Specific Styles & Code
105
Maintaining a Localized Site
106
Locale-Specific Pages & Sections
107
Localizing Form Success & Error Messages
107
Locale Switcher
The Locale List Element
401
Build a Dropdown Locale Switcher
402
Add Flags to the Locale Switcher
403
Add Localized Locale Names to the Locale Switcher
404
Make the Locale Switcher Responsive & Visible in your Nav
405
Advanced Localization
Splitting Locales by ccTLD
801
No items found.
Published
December 8, 2023
Updated
December 8, 2023
in lightbox

As of 23-Dec-2023 Webflow Localization doesn't localize CMS date fields.

This article explores approaches you might be able to take to resolve this if it's a significant issue on your site.

Problems to Consider

Non-Specific Locales

Depending on how you've setup Localization, you may only have a language code like en, which won't always be specific enough.

For example, en-US and en-GB format dates differently, so if the en locale is selected, which should it show?

I've not tested this however the best practice is likely to always use a specific locale like en-GB, even if you simplify the locale path to e.g. /en.

Dates within Text

If you have dates within text, they may be at the mercy of the machine translator as to what happens to them. If they are not translated, then you could use a similar process as above, in combination with a regex replace.

However, your date formats would have to be extremely consistent which is a big ask in handwritten text.

In general I'd leave these as a lost cause and hopefully Webflow can remedy any limitations there.

Timezones

Depending on the information you're trying to convey, formatting a date may not be enough. You may need to adjust it to the viewer's timezone as well, which cannot always be determined by the locale alone.

A good example here is an online schedule of streaming video events.

At the very least, make certain to always display the timezone for the visitor's reference.

Using Javascript

Modern browsers have the ability to localize dates using the Intl.DateTimeFormat() function, and Webflow indicates the currently selected locale in the <html lang="x"> attribute.

The rest is gluing them together;

  • Pull the current language from the html lang attribute
  • Get your current date and parse it- Date.parse could work but you may want to use a library like date-fns
  • Localize your date to the desired locale
  • Write the contents back

Here's some partial code for reference;

Notes

Videos
No items found.
Table of Contents
Comments
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.