Follow me on TwitterFollow me on Webflowmy Webflow blog

Pardon my French!

A set of Javascript files to translate dates from english to your local language, and to convert time from US to international format. Especially useful for your Webflow CMS international clients.

Tuesday, 29 August, 2017 at 2 PM Mardi 29 Aout 2017 à 14:00

get the code

Translating days and months

The first script translate dates by swapping months and days with a local translation. It doesn't format it to your local format, you need to format the original english date as you would do for your local date.
For example, the english date Tuesday, 29 August, 2017 must be formated this way prior to be translated to French:

Tuesday 29 August 2017

Mardi 29 Aout 2017

In Webflow, you'll use 4 separate elements to format your date. Prepare 4 text elements, and bind them one after the other to the appropriate date element until you have a complete date respecting your local format.

In order for the date translating script to work, you have to add an extra class to any element that needs to be translated. Here on the day and the month. By default, the class to add is .dateclass on months, and .dayclass on days. They can be added as  combo class. The script will scan all the elements with those class and look into them for known words to translate.

converting time

Time can't just be translated, it need to be converted, from 12 hours US format with AM and PM, to 24 hours international format (often called military time in the US).

Time can't just be translated, it need to be converted, from 12 hours US format with AM and PM, to 24 hours international format (often called military time in the US).

8:30 AM

8:30

8:30 PM

20:30

In Webflow, you don't have any option to format your time. There's only one possible choice.

In order for the time formatting script to work, you have to add an extra class to any time that needs to be turned to the 24 hours format. By default, this class is .timetoformat. You can add this class as a combo class.

Adding the scripts to your site

1 — Add the translate-date-site script at site level

Go to your site's Project Settings, in the Custom Code tab. Paste both scripts in the Footer Code area, and make sure the script remains wrapped inside <script> tags.

2 — Add the translate-date-page script at page level

On each page or template where you need to script to translate dates, you'll add this second script.

3 — Add the convert-time script at site level

At site level, after the main translate-date script, add the time convert script.

Fine tuning for a better UX

Depending on how fast the loading of the page happens, or on how powerful the client device is, it's possible to witness a flash on the elements affected by the script: you'll briefly see the dates and time in US language and format, then they'll flash and show their translated and converted counterparts. It can be unnoticeable on certain circumstances, but for sure for some users this flash will be seen on every page, for every visit.

To prevent this flash to happen, let's craft an Interaction that adds a delay prior to show dates and time. You'll most likely chose a parent element of dates and time to add the Interaction to, so you end up with a nice and controlled effect. I called my Interaction Delays load. It's configured as shown below.

The Interaction, as you see, delays the appearance of an element by 200ms and also makes sure that every asset on the page is loaded before happening.

Affect this interaction to any date or time element that's above the fold, meaning on the upper part of a page. Elements placed lower on the page most likely don't need to be delayed, as their flash will happen while they're out of sight.

Get the scripts

Download the scripts in .txt format.

Translate date
Site level script
(en > FR)
Translate date
Page level script
convert TIME

Get your local data

I've prepared datasets for Europe's most common languages.
Click on the country you're working with to download the appropriate dataset.

I haven't prepared data for the language you're working with yet? No trouble, you can craft your own script using the international data you'll find in those 2 files. Download international days and months in CSV format.