COMPONENTS.md

@@ -442,6 +442,106 @@ Bouton radio (à utiliser en groupe avec le même `name`).
 
 ---
 
+## MalioDate
+
+Sélecteur de date unique avec popover (grille de calendrier + vue mois/année).
+
+La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et ferme le popover.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| null` | `undefined` | Date ISO `"YYYY-MM-DD"` (v-model) |
+| `id` | `string` | `''` | Id du champ |
+| `name` | `string` | `''` | Attribut name |
+| `label` | `string` | `''` | Label flottant |
+| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
+| `required` | `boolean` | `false` | Requis |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Lecture seule |
+| `hint` | `string` | `''` | Texte d'aide |
+| `error` | `string` | `''` | Message d'erreur |
+| `success` | `string` | `''` | Message de succès |
+| `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` (jours antérieurs désactivés) |
+| `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` (jours postérieurs désactivés) |
+| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
+| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
+
+**Events :** `update:modelValue(value: string | null)`
+
+```vue
+<MalioDate v-model="date" label="Date de naissance" />
+<!-- date === "2026-05-20" -->
+<MalioDate v-model="rdv" label="Rendez-vous" :min="todayIso" :max="maxIso" />
+```
+
+---
+
+## MalioDateRange
+
+Sélecteur de **plage de dates** (date de début → date de fin) dans un seul champ. Cliquer un premier jour démarre la plage, le second la termine ; un survol prévisualise la plage.
+
+La valeur est un objet `{ start: string; end: string }` (dates ISO `"YYYY-MM-DD"`), ou `null`.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `{ start: string; end: string } \| null` | `undefined` | Plage de dates ISO (v-model) |
+| `id` | `string` | `''` | Id du champ |
+| `name` | `string` | `''` | Attribut name |
+| `label` | `string` | `''` | Label flottant |
+| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
+| `required` | `boolean` | `false` | Requis |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Lecture seule |
+| `hint` | `string` | `''` | Texte d'aide |
+| `error` | `string` | `''` | Message d'erreur |
+| `success` | `string` | `''` | Message de succès |
+| `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` |
+| `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` |
+| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
+| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
+
+**Events :** `update:modelValue(value: { start: string; end: string } | null)`
+
+```vue
+<MalioDateRange v-model="periode" label="Période de séjour" />
+<!-- periode === { start: "2026-05-20", end: "2026-05-27" } -->
+```
+
+---
+
+## MalioDateWeek
+
+Sélecteur de **semaine ISO** : cliquer un jour (ou un numéro de semaine) sélectionne la semaine entière.
+
+La valeur est une chaîne au format **semaine ISO native** `"YYYY-Www"` (ex. `"2026-W21"`), ou `null`. Le champ affiche `Semaine W (JJ/MM → JJ/MM/AAAA)`.
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `modelValue` | `string \| null` | `undefined` | Semaine ISO `"YYYY-Www"` (v-model) |
+| `id` | `string` | `''` | Id du champ |
+| `name` | `string` | `''` | Attribut name |
+| `label` | `string` | `''` | Label flottant |
+| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
+| `required` | `boolean` | `false` | Requis |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `readonly` | `boolean` | `false` | Lecture seule |
+| `hint` | `string` | `''` | Texte d'aide |
+| `error` | `string` | `''` | Message d'erreur |
+| `success` | `string` | `''` | Message de succès |
+| `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` |
+| `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` |
+| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
+| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
+
+**Events :** `update:modelValue(value: string | null)`
+
+```vue
+<MalioDateWeek v-model="semaine" label="Semaine de livraison" />
+<!-- semaine === "2026-W21" -->
+```
+
+---
+
 ## MalioTime
 
 Sélecteur d'heure.