Easily translate date in Webflow

Hello guys,

I’ve been using this code for every project now to translate dynamic words like months or days in Webflow.
Credits goes to i think @bart who gave the base of the code to @vincent

The way it works :

  • Simply add combo class classdate on any text block you want to translate.
  • Change the words in the code below if you to change de translation or add a new line you want to translate in monthsEn and the translation in monthsFr
  • Add the script bellow in the footer of your project.

Enjoy

<script>
// config
var dateclass = 'classdate';

$(document).ready(function() {
  var wfdc = $('.' + dateclass);

  wfdc.each(function() {
    var wfdctxt = $(this).text();

    var monthsEn = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ];

    var monthsFr = [
      'janvier',
      'février',
      'mars',
      'avril',
      'mai',
      'juin',
      'juillet',
      'aout',
      'septembre',
      'octobre',
      'novembre',
      'décembre',
      'Lundi',
      'Mardi',
      'Mercredi',
      'Jeudi',
      'Vendredi',
      'Samedi',
      'Dimanche'
    ];

    for (var i = 0; i < monthsEn.length; i++) {
      wfdctxt = wfdctxt.replace(monthsEn[i], monthsFr[i]);
    }

    $(this).text(wfdctxt);
  });
});
</script>
9 Likes

This is case-sensitive though. I suggest this:

wfdctxt = wfdctxt.toLowerCase().replace(monthsEn[i].toLowerCase(), monthsFr[i]);
1 Like

Thanks for sharing this :raised_hands:

There is another way but with a dependency, using Luxon’s small JS package.

  1. Insert the following script on the head code of your project (or page):
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.4.0/luxon.min.js" integrity="sha512-v1zUTZ9zv9Wb2scL/ANxXM6m7yegm/W5SN8SRHNFADdZIuSFFkrEBjNxO803DdFkjoCcJ88g1WHRVlLN6K/O1A==" crossorigin="anonymous" referrerpolicy="no-referrer" async></script>
  1. Insert the following script on the footer code of the desired page (or even the whole project if needed):
<script>
function translateDate(o,n,l) {
	let DateTime = luxon.DateTime
	let x = document.getElementsByClassName("luxon");
	let i;
	for (i = 0; i < x.length; i++) {
    x[i].innerText = DateTime.fromFormat(x[i].innerText, o).setLocale(l).toFormat(n);
    }
}

Webflow.push(function() {
translateDate("LLL dd, yyyy","dd LLLL yyyy","fr")
});
</script>
  1. Configure the script. The translateDate() function needs 3 arguments: old format (o), new format (n), locale (l). On the example below modify the following piece of code accordingly.
translateDate("LLL dd, yyyy","dd LLLL yyyy","fr") 

This changes “May 1st, 2022” to “1er mai 2022”. Feel free to play around with time tokens and locales..

  1. Add the class attribute “luxon” to the HTML element which contains the original date. Please note that the code replaces any text contained within that element, so please target one that only contains the date.

  2. Publish your website. Note that it won’t display the translation within the designer.

Feel free to tweak the code, adjust it to your own needs! I didn’t need more than that, so I kept it to the bare minimums. The main advantage of that method is that it’s totally automatic and you can do fairly advanced manipulations.

Please don’t ask me why Webflow does not implement such a simple feature :shushing_face:

1 Like

This is great! Many thanks :laughing:

@zbrah & @bart @vincent

This is amazing, thanks!
Just saved me so much time.

Hi guys, I hope you’re well.

I’m trying to use that code with Finsweet’s CMS Load, but it’s not working.
Basically, the content that shows after clicking on the Load More button doesn’t translate.
Has anyone already had this problem?

Thank you
@zbrah @vincent

You need to craft a JS script that is re-running the date translation JS each time there’s a change on the page. Ask ChatGPT, it’s good at that.