How to translate a post date into French in Webflow?

When managing a blog or CMS-powered website, displaying dates in the correct language is crucial for a seamless user experience. Webflow, a powerful no-code website builder, allows flexibility in styling dates but does not provide native support for displaying dates in French or other non-English languages.

For businesses or content creators targeting a French-speaking audience, having English month and day names can negatively impact the site’s professional appearance. Since Webflow does not offer an out-of-the-box solution for translating dates, a custom JavaScript solution is necessary.

In this article, we will guide you through the process of automatically translating Webflow CMS post dates into French using JavaScript and class attributes. This method ensures that all CMS-generated dates appear in French without requiring manual adjustments for each post.

‍

Should you display dates on your blog?

‍

Adding a date to a blog post is not always a good practice. If you do not update your blog frequently, an older date may discourage visitors from reading your content, as they might assume it is outdated.

However, in some cases, displaying the date can be beneficial:

• ‍For credibility: visitors may feel reassured when they see recent and regularly updated content.‍
• For SEO: Google favors fresh content, and a visible date can improve trustworthiness.‍
• For news-based content: if your site publishes industry updates, articles with dates add relevance and clarity.

If you decide to display dates, ensuring they are in the correct language is essential for consistency and professionalism.

‍

Why Webflow does not display dates in French?

‍

One of Webflow’s limitations is its lack of built-in support for translating CMS dates into different languages. While it allows for various styling options, the default date formatting follows the English language, making it impossible to automatically display day and month names in French.

For example, Webflow might display: 📅 Saturday, October 26, 2024

But for a French audience, the expected format would be: 📅 Samedi 26 Octobre 2024

To achieve this, we must use custom JavaScript to replace the English names of months and days with their French equivalents.

‍

{{blog_article_cta01}}

‍

Translating day and month names using custom JavaScript

‍

To implement this solution, we need to:

1. ‍Prepare and format the date in Webflow
2. Assign class names to different date components
3. Insert a JavaScript snippet to replace English names with French translations

‍

1. Structuring the date in Webflow CMS

‍

Inside your Webflow Collection, create a date container (date-component) that contains four separate text blocks:

• ‍Day name → Assign class: day-component‍
• Day number → Assign class: digit-component (no translation needed)‍
• Month name → Assign class: month-component‍
• Year → Assign class: year-component (no translation needed)

‍

2. Adding class attributes for translation

‍

To ensure the script correctly identifies the text elements to be translated, assign additional class attributes:

• ‍Day name (day-component) → Add class: dayclass‍
• Month name (month-component) → Add class: dateclass‍
• Day number and Year → No translation required

‍

3. Adding the JavaScript code

‍

Now, go to Webflow Site Settings → Custom Code → Footer and insert the following JavaScript snippet:

1<script>
2console.clear();
3
4const data = {
5    months: {
6        en: [
7            'January', 'February', 'March', 'April', 'May', 'June',
8            'July', 'August', 'September', 'October', 'November', 'December',
9        ],
10        local: [
11            'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
12            'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre',
13        ],
14    },
15    days: {
16        en: [
17            'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday',
18        ],
19        local: [
20            'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche',
21        ],
22    }
23};
24
25// Error handling: Ensure correct array lengths
26if (data.months.local.length !== 12) {
27    console.error('Months are incorrect! Check your script.');
28}
29if (data.days.local.length !== 7) {
30    console.error('Days are incorrect! Check your script.');
31}
32
33// Function to shorten words (e.g., "Jan" instead of "January")
34const shortenDaysMonths = daymonth => daymonth.substring(0, 3);
35
36// Function to replace English names with French equivalents
37const convertToLocal = (daydate, elementsToConvert) => {
38    elementsToConvert.each(function() {
39        const element = $(this);
40        let text = element.text();
41
42        if (daydate === 'm' || daydate === 'month' || daydate === 'months') {
43            for (let i = 0; i < data.months.en.length; i++) {
44                text = text.replace(new RegExp(data.months.en[i], 'g'), data.months.local[i]);
45                text = text.replace(new RegExp(shortenDaysMonths(data.months.en[i]), 'g'), shortenDaysMonths(data.months.local[i]));
46                element.text(text);
47            }
48        } else if (daydate === 'd' || daydate === 'day' || daydate === 'days') {
49            for (let i = 0; i < data.days.en.length; i++) {
50                text = text.replace(new RegExp(data.days.en[i], 'g'), data.days.local[i]);
51                text = text.replace(new RegExp(shortenDaysMonths(data.days.en[i]), 'g'), shortenDaysMonths(data.days.local[i]));
52                element.text(text);
53            }
54        }
55    });
56};
57</script>

‍

4. Executing the script in Webflow pages

‍

Once the script is added at the site level, you need to ensure it runs on pages displaying CMS content. To do this, go to the page settings where your collection items appear and insert the following code:

1<script>
2    const allDates = $('.dateclass');
3    const allDays = $('.dayclass');
4
5    convertToLocal('m', allDates);
6    convertToLocal('d', allDays);
7</script>

‍

5. Publishing and testing

• ‍Publish your site to Webflow’s live domain.‍
• Verify that all CMS post dates now appear in French instead of English.‍
• Remember: scripts are not executed in Webflow’s Designer view, so you must check the live version.

‍

Conclusion

By integrating this custom JavaScript solution, you can automatically translate post dates into French within Webflow’s CMS without needing to manually adjust each article. This method is particularly useful for multilingual websites or for businesses targeting a French-speaking audience.

Even though Webflow lacks built-in language support for dates, this workaround ensures full control over how dates are displayed.

If your blog content is time-sensitive, displaying dates in the appropriate language helps maintain consistency, professionalism, and user engagement. By following these steps, you can ensure that your content remains localized and optimized for your audience.

Thanks to Vincent Bidaux for creating this code. You can find his work here: https://webflow.com/made-in-webflow/website/pardon-my-French-Translate-your-CMS-dates-and-time