Comment traduire la date d'un post en français dans Webflow ?

Traduire les jours et mois des dates dans Webflow

Ajouter la date à un post n'est pas toujours une bonne pratique. Si vous n'alimentez pas régulièrement votre blog, un article qui date de plusieurs mois est un mauvais signal pour votre client. Je conseille parfois de ne pas dater les post à certain client s'il ne sont pas sûr de publier assez régulièrement. Cependant, si la date peut envoyer un mauvais signal, elle est aussi un atout pour votre image.

Webflow ne permet pas d'afficher une date en français

AEN Alpes énergies nouvelles, souhaite alimenter son site avec un blog et m'a demandé d'ajouter la date pour les derniers post sur la page d'accueil. Or, le CMS Webflow, qui permet une certaine souplesse pour la stylisation d'une date ne permet pas d'afficher la date en français. L'option 100% digitale est la seule solution no-code. Cette alternative ne convenait pas au client.

Traduire en français le jour et le mois avec du custom code JS

Cette automatisation se prépare ne plusieurs temps

Préparer et formater la date

Dans votre collection, créer un bloc date-component dans lequel vous créer 4 autres bloc texte :

1. un premier bloc text pour le jour que vous nommez : day-component
2. un deuxième bloc text pour le chiffre du jour que vous nommez: digit-component
3. un troisième bloc text pour le mois que vous nommez : month-component
4. en fin un quatrième bloc text pour l'année que vous nommez : year-component

Pour que le script s'exécute correctement, il faut attribuer un lass supplémentaire au bloc text qui seront trraduits automatiquement :

1. au premier bloc text day-component ajouter la propriété dayclass
2. au troisième bloc text month-component ajoutez la propriété dateclass
3. pour le jour et l'année. pas besoin de traduction :)

Ajouter les scripts

Dans les paramètres de votre site à l'onglet custom code, et ajouter le code javascript ci-dessous dans le footer.

<script>
console.clear();

const data = {
    months: {
        en: [
            'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December',
        ],
        local: [
            'Janvier', 'Février', 'Mars', 'Avril', 'May', 'Juin',
            'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre',
        ],
    },
    days: {
        en: [
            'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday',
        ],
        local: [
            'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche',
        ],
    }
};

if (data.months.local.length !== 12) {
    console.error('Months are incorrect! Check your script.');
}
if (data.days.local.length !== 7) {
    console.error('Days are incorrect! Check your script.');
}

const shortenDaysMonths = daymonth => daymonth.substring(0, 3);
const convertToLocal = (daydate, whatToConvert) => {
    whatToConvert.each(function() {
        const theObject = $(this);
        let text = theObject.text();

        if (daydate === 'm' || daydate === 'month' || daydate === 'months') {
            for (let i = 0; i < data.months.en.length; i++) {
                text = text.replace(new RegExp(data.months.en[i], 'g'), data.months.local[i]);
                text = text.replace(new RegExp(shortenDaysMonths(data.months.en[i]), 'g'), shortenDaysMonths(data.months.local[i]));
                theObject.text(text);
            }
        } else if (daydate === 'd' || daydate === 'day' || daydate === 'days') {
            for (let i = 0; i < data.days.en.length; i++) {
                text = text.replace(new RegExp(data.days.en[i], 'g'), data.days.local[i]);
                text = text.replace(new RegExp(shortenDaysMonths(data.days.en[i]), 'g'), shortenDaysMonths(data.days.local[i]));
                theObject.text(text);
            }
        }
    });
};
</script>

Maintenant que le projet contient le code, il faut ajouter sur dans les paramètres des pages où la collection apparaîtra le code suivant :

<script>
      const allDates = $('.dateclass');
      const allDays = $('.dayclass');

      convertToLocal('m', allDates);
      convertToLocal('d', allDays);
</script>

Il ne reste plus qu'à publier le site pour exécuter le script et vérifier le résultat. Dans l'interface Designer de Webflow les script ne sont pas exécutés.

J'ai trouvé ce code sur la page Pardon my French. Le code à intégrer dans les settings du projet a cependant été corrigé : j'ai demandé à ChatGPT de l'examiner notamment à cause de caractères spéciaux pour les mois de Février et Décembre "Fé". L'iA m'a proposé un nouveau code et a bien corrigé ces caractères spéciaux.

‍

Solution plus simple encore : cibler directement votre date CMS

Si votre besoin est simplement de traduire la date affichée dans vos articles Webflow (par exemple remplacer May par mai), il existe une approche beaucoup plus simple.

Plutôt que de parcourir tout le DOM à la recherche de dates, vous pouvez cibler uniquement le bloc concerné.

1. Ajouter un attribut personnalisé sur votre date CMS

Dans Webflow, sélectionnez simplement l’élément texte qui affiche votre date de publication (le champ CMS Date).

Ajoutez ensuite un custom attribute :

‍

<script>
/* DATE FR */
const months = {
  January: "janvier", February: "février", March: "mars",
  April: "avril", May: "mai", June: "juin", July: "juillet",
  August: "août", September: "septembre", October: "octobre",
  November: "novembre", December: "décembre"
};
document.querySelectorAll("[data-date-fr]").forEach(function (el) {
  el.textContent = el.textContent.replace(
    /\b(January|February|March|April|May|June|July|August|September|October|November|December)\b/g,
    (match) => months[match]
  );
});
</script>

Cette approche permet d’indiquer explicitement à votre script quel élément doit être traité.

Résultat :

• script plus léger
• moins de risques d’effets de bord
• maintenance plus simple
• comportement plus prévisible si votre structure HTML évolue
• facilement réplicable sur toutes les pages de votre site

‍

<script>
/* DATE FR — locale-aware */
const lang = document.documentElement.lang || navigator.language || "en";

if (lang.startsWith("fr")) {
  const months = {
    January: "janvier", February: "février", March: "mars",
    April: "avril", May: "mai", June: "juin", July: "juillet",
    August: "août", September: "septembre", October: "octobre",
    November: "novembre", December: "décembre"
  };
  document.querySelectorAll("[data-date-fr]").forEach(function (el) {
    el.textContent = el.textContent.replace(
      /\b(January|February|March|April|May|June|July|August|September|October|November|December)\b/g,
      (match) => months[match]
    );
  });
}
</script>

2. Laisser JavaScript traduire automatiquement les mois

Une fois l’attribut en place, le script cible uniquement les éléments concernés et remplace les mois anglais par leur équivalent français.

Exemple :

• May 12, 2026 → 12 mai 2026
• October 3, 2025 → 3 octobre 2025

Pourquoi cette méthode est plus propre ?

C’est souvent l’approche la plus pertinente dans Webflow.

Pourquoi ?

Parce que Webflow génère les dates CMS selon la locale du projet ou certains formats par défaut, mais il ne permet pas toujours un contrôle fin sur le rendu exact souhaité.

Avec un attribut dédié :

• vous gardez le contrôle
• vous évitez de toucher aux autres textes du site
• vous rendez votre logique explicite pour les futures évolutions

En pratique, c’est une solution simple, robuste et parfaitement adaptée à un projet Webflow où l’on cherche un correctif rapide sans complexifier inutilement le projet.

Si vous devez gérer plusieurs langues ou une vraie logique de localisation avancée, Webflow Localization reste évidemment l’option la plus structurée. Mais pour un besoin ponctuel, cette méthode fait parfaitement le travail.

‍