Date picker
Les sélecteurs de date permettent aux utilisateurs de sélectionner une seule ou une plage de dates.
Description
Plateformes
Anatomie
- Input : l'utilisateur peut entrer la date directement dans le champ en format jour/mois/anné
- Calendrier: ouvre le dropdown calendar
- Affichage date : affiche le mois dans lequel l'utilisateur se trouve. Au clic, permet d'avoir une vue annuelle.
- Pagination : Permet à l'utilisateur d'avancer ou de reculer dans la liste
- Jour actuel
- Jour sélectionné
- Input - date de début : l'utilisateur peut entrer la date de début directement dans le champ en format jour/mois/année. L'icon calendrier ouvre le calendrier.
- Input - date de fin : idem 1.
- Jour sélectionné : affiche le jour sélectionnée dans l'input précédent
- Jours inclus dans la plage de dates
- Jour actuel
- Affichage d'un jour au survol
Usage
Quand l'utiliser ?
Date picker
Quand un utilisateur doit sélectionner une date pour remplir un formulaire, choisir une date de rendez-vous, etc...
Date range
Quand un utilisateur doit choisir une plage de dates.
Do's and don'ts
-
Do
Ouvrir le calendrier à la date du jour
-
Don't
Ouvrir le calendrier à une date trop lointaine
-
Do
Si l’utilisateur doit sélectionner uniquement un jour, mois ou année, utiliser un select
-
Don't
Il est déconseillé d'utiliser un date picker lorsque l'utilisateur dois sélectionner uniquement une année
-
Do
Garder le même format de date dans un même formulaire
-
Don't
Il est interdit d’utiliser des formats de date différents
Anatomie
- Input : l'utilisateur peut entrer la date directement dans le champ en format jour/mois/anné et ouvre le dropdown calendar
- Calendrier: ouvre le dropdown calendar
- Confirmation : valide la date choisie
- Sélecteur de date : dropdown natif de sélection de date
- Input - date de début : l'utilisateur peut entrer la date de début directement dans le champ en format jour/mois/année. L'icon calendrier ouvre le calendrier.
- Input - date de fin : idem 1.
- Jour sélectionné : affiche le jour sélectionnée dans l'input précédent
- Jours inclus dans la plage de dates
- Jour actuel
Usage
Quand l'utiliser ?
Date picker
Quand un utilisateur doit sélectionner une date pour remplir un formulaire, choisir une date de rendez-vous, etc...
Date range
Quand un utilisateur doit choisir une plage de dates.
Do's and don'ts
-
Do
Ouvrir le calendrier à la date du jour
-
Don't
Ouvrir le calendrier à une date trop lointaine
-
Do
Si l’utilisateur doit sélectionner uniquement un jour, mois ou année, utiliser un select
-
Don't
Il est déconseillé d'utiliser un date picker lorsque l'utilisateur dois sélectionner uniquement une année
-
Do
Garder le même format de date dans un même formulaire
-
Don't
Il est interdit d’utiliser des formats de date différents
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.