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, 2021 at 2 PM → Mardi 29 Aout 2021 à 14:00
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 2021
→
Mardi 29 Aout 2021
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.
Update! As of December 2018, converting time isn't needed anymore as Webblow introduced support for international time. Please ignor the following section.
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.
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.
Important Be aware that as this method uses Javascript, the results of the scrips can't be seen live in the Designer. You will only see the results of the conversions and replacements on the published site. So publish and go check on production for the results of the scripts.
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.
Download the scripts in .txt format.
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.
