▼
Streaming live at 10am (PST)

Easily translate date in Webflow

Community resources Webflow Tips
#1

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
#2

This is case-sensitive though. I suggest this:

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