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

```html
<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

```html
<!-- 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 :

```js
window.nsTools?.date?.updateAll()
```

---

## Développement local

Tu peux tester cet outil en local via :

```bash
pnpm build --filter ns-date
pnpm serve
```

Puis dans ton HTML de test :

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

---

## Dépendances

- [Day.js](https://day.js.org/) pour le parsing/formatage
- [ns-core](https://github.com/rricol/nsTools/tree/main/packages/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](https://github.com/rricol) pour [numera.swiss](https://numera.swiss)