ns-date – Traduction et formatage intelligent de dates pour Webflow

ns-date est un outil JavaScript léger pour Webflow permettant de :

• traduire automatiquement les dates dans la bonne langue (fr, en, ...)
• personnaliser le format (ex: dddd, DD-MM-YYYY, etc.)
• afficher des dates relatives (ex: il y a 3 jours)
• appliquer un format fallback si la date est trop ancienne (relative/format)
• supporter les contenus dynamiques (CMS, filters...)

Utilisation simple (via CDN)

<script src="https://cdn.jsdelivr.net/npm/@numeraswiss/tools-date@1/date.js" ns-date-lang="fr" ns-date-usformat="false"></script>

Ce script charge automatiquement le module core (ns-core) si besoin.

Attributs disponibles

| Attribut | Description | |------------------------|-----------------------------------------------------------------------------| | ns-date-format | Format de sortie (ex: LL, dddd, DD-MM-YYYY, relative, etc.) | | ns-date-lang | Langue à utiliser pour cet élément (ex: fr, en, de, it, es) | | ns-date-usformat | Définit si la date en entrée est au format US (ex: 05-19-2025) | | ns-date-maxdiff | Seuil à partir duquel relative devient un format classique (1w, 3M) | | ns-date-fallback | Texte à afficher si la date est invalide (ex: -) |

Exemples pratiques dans Webflow

<!-- Format classique : jour de la semaine -->
<div ns-date-format="dddd">2025-05-19</div> <!-- → lundi -->

<!-- Date relative -->
<div ns-date-format="relative">2024-12-01</div> <!-- → il y a 6 mois -->

<!-- Relative avec fallback si trop vieux -->
<div ns-date-format="relative/DD.MM.YY" ns-date-maxdiff="3M">2023-10-01</div>
<!-- → 01.10.23 si trop ancien -->

<!-- Forcer une langue sur un élément -->
<div ns-date-format="LL" ns-date-lang="en">19-05-2025</div> <!-- → May 19, 2025 -->

<!-- Date invalide : fallback -->
<div ns-date-format="LL" ns-date-fallback="-">invalid-date</div> <!-- → "-" -->

Formats d'entrée supportés

Par défaut (avec ns-date-usformat="false"), ces formats sont reconnus :

• DD-MM-YYYY
• YYYY-MM-DD (ISO)
• D MMMM YYYY (2 mai 2025)
• MMMM D, YYYY (May 2, 2025)
• MMM D, YYYY (May 2, 2025)
• ...

Si ns-date-usformat="true" → MM-DD-YYYY est prioritaire.

Chargement automatique sur DOM change

ns-date observe automatiquement les ajouts d’éléments dynamiques (CMS Filter, Tabs, etc.)
Tu peux aussi forcer la mise à jour manuellement :

window.nsTools?.date?.updateAll()

Développement local

Tu peux tester cet outil en local via :

pnpm build --filter ns-date
pnpm serve

Puis dans ton HTML de test :

<script src="http://127.0.0.1:5500/packages/ns-date/dist/date.js" ns-date-lang="fr"></script>

Dépendances

• Day.js pour le parsing/formatage
• ns-core pour les fonctions partagées

Astuce

Tu peux combiner les formats relative/LL, relative/DD.MM.YY, etc. pour une meilleure UX selon la fraîcheur de la date.

Licence

MIT – @rricol pour numera.swiss