DatePicker Sélecteur de Date
Introduction
Un contrôle de formulaire interactif qui combine un champ de saisie de texte avec une superposition de calendrier contextuelle. Il prend en charge les sélecteurs de date unique, les sélections de plage de dates, les bascules de multi-sélection, les limites de calendrier personnalisées, les en-têtes de jours de semaine localisés et la navigation au clavier.
Le DatePicker est entièrement intégré en tant que bloc datePicker dans le Page Builder, permettant aux gestionnaires de contenu et aux développeurs de définir des libellés de texte, le format des espaces réservés, les modes de sélection et les thèmes de couleur d'accentuation directement dans les modèles de page Sveltia CMS.
Utilisation
Ces configurations représentent exactement comment les éléments de bloc du page-builder sont construits.
1. Sélecteur de date unique (non contrôlé / standard)
Notre disposition standard de sélecteur de date permettant aux utilisateurs de sélectionner une date spécifique dans le menu déroulant du calendrier. Utile pour les formulaires, les inscriptions ou les réservations planifiées.
{
"type": "datePicker",
"label": "Choose Date",
"selectionMode": "single",
"placeholder": "YYYY-MM-DD",
"colorPalette": "blue",
"interactive": true
}
2. Sélecteur de plage de voyage (calendrier délimité)
Restreint les limites du calendrier sélectionnable entre des dates spécifiques. Excellent pour les sélections de vols, les réservations d'hôtels ou les fenêtres comptables. Définir selectionMode sur "range" rend les entrées de début et de fin.
{
"type": "datePicker",
"label": "Travel Dates",
"selectionMode": "range",
"min": "2026-01-01",
"max": "2026-12-31",
"colorPalette": "purple",
"interactive": true
}
Propriétés
| Propriété | Type de champ CMS | Défaut | Description / Options prises en charge |
|---|---|---|---|
Texte du libellé (label) | string | - | Texte de libellé descriptif du formulaire rendu adjacent au champ de saisie de texte. |
Espace réservé (placeholder) | string | "YYYY-MM-DD" | Texte de format guide affiché dans le champ de saisie de texte lorsqu'il est vide. |
Mode de sélection (selectionMode) | select | "single" | Définit comment les dates sont collectées. • "single" — Résout une seule date. • "range" — Résout un bloc s'étendant (crée des entrées doubles). • "multiple" — Bascule plusieurs jours indépendants. |
Date minimale (min) | string | - | La date sélectionnable la plus ancienne au format ISO YYYY-MM-DD. Les cellules précédentes sont désactivées. |
Date maximale (max) | string | - | La date sélectionnable la plus tardive au format ISO YYYY-MM-DD. |
Afficher les numéros de semaine (showWeekNumbers) | boolean | false | Lorsque true, rend une colonne de numéro de semaine ISO-8601 le long du bord gauche de la grille de jours. |
Thème de couleur (colorPalette) | select | "blue" | Thème visuel appliqué aux jours sélectionnés, surbrillances du jour et limites actives. • Options : blue, green, red, purple, orange, amber, cyan, slate. |
Activer l'hydratation (interactive) | boolean | true | Lorsque true, hydrate le composant en tant qu'îlot pour gérer les fenêtres contextuelles de calendrier et les clics extérieurs. |
Prise en charge clavier et accessibilité
Lorsque le panneau de superposition du calendrier est ouvert et que le focus est dirigé à l'intérieur, les utilisateurs peuvent effectuer entièrement les sélections via les touches standard du clavier :
- ← / → — Déplacer le focus vers la cellule du jour précédent ou suivant.
- ↑ / ↓ — Déplacer le focus de ±1 semaine (7 jours) verticalement.
- PageUp / PageDown — Faire avancer ou reculer la vue du calendrier d'un mois complet.
- Shift+PageUp / Shift+PageDown — Faire avancer ou reculer d'une année complète.
- Enter / Space — Sélectionner la cellule de jour active focalisée et valider.
- Esc — Fermer immédiatement la superposition contextuelle et renvoyer le focus sur le champ de saisie du déclencheur.
Sous le capot, la grille de jours utilise des arrêts de focus tabIndex vagabonds pour éviter de tabuler à travers chaque jour du calendrier. Toutes les grilles de cellules annoncent des descriptions sémantiques correctes pour lecteurs d'écran (role="grid", aria-multiselectable, aria-current="date").