Streaming live at 10am (PST)

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>
6 Likes

This is case-sensitive though. I suggest this:

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