nl-tr-date-webflow

Traducteur de date CMS Webflow international

Un script Vanilla JS ultra-léger (2ko) pour traduire automatiquement les dates de votre CMS Webflow dans toutes les langues (i18n). Zéro classe CSS requise.

Installation :

≃ 15 minutes

Poids :

2 ko

May

2026

Description

Un script ultra-léger (2ko) 100% Vanilla JS pour traduire les dates de vos listes ou pages CMS Webflow dans n'importe quelle langue. Fini les dates coincées en anglais ("January", "Monday").

Le script se contente d'extraire la date présente sur votre page et de la reformater en utilisant directement l'API native du navigateur (Intl.DateTimeFormat), ce qui explique son poids de 2ko !

Caractéristiques :

🌍 Prêt pour l'international (i18n) : Supporte toutes les langues via les codes standards ISO 639-1 (ex: fr-FR, es-ES, de-DE).
⚡️ Ultra léger & Zéro Dépendance : Seulement 2ko. Pas besoin de jQuery, de Moment.js ou d'outils externes lourds.
⚙️ Indépendant du layout : C'est vous qui construisez le design de votre date. Le script ne vient que remplacer le texte brut sans casser votre mise en page.
🎯 100% Custom Attributes : Le script cible uniquement les attributs personnalisés. Il n'interfère jamais avec vos classes CSS, vous laissant une liberté totale pour nommer et styliser vos éléments.
⚠️ Le contexte est obligatoire : Le script a impérativement besoin du numéro du jour, du mois et de l'année pour "comprendre" la date et éviter les bugs d'affichage.
🫣 Comment cacher un élément ? Le seul élément que vous pouvez totalement supprimer de votre structure est le nom du jour en lettres (day). Si vous ne voulez pas afficher l'année ou le numéro du jour sur votre design final, ne les supprimez pas du DOM. Mettez simplement la Div concernée en display:none dans Webflow.

Custom attributes

💡 Cliquez sur l'attribut ou la valeur ci dessous pour le copier !

nl-tr-date-lang

fr-FR

Cible le parent et définit la langue (Code ISO).

nl-tr-date-data

day

Cible le nom du jour (ex: Monday).

nl-tr-date-data

digit

Cible le numéro du jour (ex: 13).

nl-tr-date-data

month

Cible le mois (ex: February).

nl-tr-date-data

year

Cible l'année (ex: 2026).

Installation :

1 : Ajoutez ce code dans le before body de votre page

<!--{ NL-translate-date-webflow }-->
<script src="https://cdn.jsdelivr.net/gh/nicolas-leitao/webflow-scripts/nl-tr-date-webflow.js" defer></script>

Copier

2 : Structure HTML & Connexion CMS

Créez un bloc Div parent (date-component) qui va contenir 4 text blocs enfants. Connectez le texte de ces 4 enfants à vos champs Date du CMS (published on, created on, etc.).

<div nl-tr-date-lang="fr-FR" class="date-component">
  
  <div nl-tr-date-data="day" class="day-component">Monday</div>
  <div nl-tr-date-data="digit" class="digit-component">12</div>
  <div nl-tr-date-data="month" class="month-component">May</div>
  <div nl-tr-date-data="year" class="year-component">2026</div>

</div>

‍Formatage requis dans Webflow :

Nom du jour : Utilisez le format "ddd" (Mon) ou "dddd" (Monday).
Mois : Utilisez le format "MMM" (Feb) ou "MMMM" (February).

Description

Caractéristiques :

Custom attributes

Installation :

1 : Ajoutez ce code dans le before body de votre page

2 : Structure HTML & Connexion CMS

3 : C'est tout !