SPIKE TECHNIQUE — Story 3.1 — Page temporaire pour valider UCalendar Nuxt UI v4 en mode range. Cette page sera supprimée après validation.

1. UCalendar — mode range (1 mois)

AC #1 : numberOfMonths dynamique (2 desktop / 1 mobile), sélection range, v-model DateRange.
Locale : en-GB

Event Date, February 2026
February 2026
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
v-model debug
{
  "start": "2026-02-10",
  "end": "2026-02-15"
}

2. UPopover + UCalendar (pattern DatePicker)

AC #1 : Simulation du pattern champ + popup calendrier, comme le futur HoliDateRangePicker.

v-model debug
{
  "start": null,
  "end": null
}

3. UInputDate — mode range

AC #1 : Composant input date natif Nuxt UI v4 avec segments éditables et popup calendrier intégré.

01
03
2026
07
03
2026
v-model debug
{
  "start": "2026-03-01",
  "end": "2026-03-07"
}

Checklist de validation manuelle

AC #1 — Desktop range : UCalendar affiche 2 mois côte à côte ? Sélection plage ok ? v-model retourne start/end ?

AC #2 — Mobile : Cellules >= 44px ? Navigation mois fonctionne ? 1 seul mois visible ? Popover utilisable ?

AC #3 — Accessibilité : Tab navigue entre zones ? Flèches déplacent le focus ? Entrée/Espace sélectionne ? Focus ring visible ? Attributs ARIA présents ?

AC #4 — i18n : Jours en FR (Lun, Mar...) ? Mois en FR ? Lundi = premier jour ? Switch langue dynamique ?