MaximePouessel
commented
1 year ago @aguilaj @SylvainBTL Revoir le comportement du Time Picker
Open mabetar2 opened 3 years ago
MaximePouessel
commented
1 year ago @aguilaj @SylvainBTL Revoir le comportement du Time Picker
Besoin
Sélection d'une donnée temporelle :
Sur Figma
Spécifications fonctionnelles
Table des matières
I. Composition Inputs Calendar Time Picker II. Comportement Date Picker __Time Picker
Composition
L'organsime Date Picker est disponible en 2 versions : sélection d'une date, sélection d'une https://user-images.githubusercontent.com/69242017/124901053-f40c1400-dfe1-11eb-9dc9-0f643107022d.mp4 et composé de plusieurs éléments :
Dans le fichier Figma, il existe également les composants CalendarRow, CalendarHead et CalendarContent; ils servent uniquement à faciliter la sélection des jours et période quand on importe le calendrier dans nos tickets.
L'organisme Time Picker permet de sélectionner une heure, par défaut les heures sont espacées de 30 minutes. Il est composé de :
Ensemble, ils forment le composant Date & Time (sélection d'une date et d'une heure) :
Inputs
Date
Utilisé pour la sélection d’une date unique. L’utilisateur peut saisir la date directement dans le champ (chiffres uniquement, le slash s’ajoute automatiquement, l’utilisateur peut saisir tous les chiffres à la suite) ou il peut sélectionner une date via le calendrier. Il a une largeur de base définie.
Date & Time
Utilisé pour la sélection d’une date et d’une heure. Il a une largeur de base définie.
Cliquer sur l’un des "champs internes" ouvre le time picker ou le calendrier.
Date Range
Utilisé pour la sélection d’une date de début et d'une date de fin, accompagné du calendrier double. Il a une largeur de base définie.
Time
Calendar
Les sélecteurs de date permettent aux utilisateurs de sélectionner une date ou une durée. Ils doivent être adaptés au contexte dans lequel ils apparaissent. Par défaut, le sélecteur de date affiche un champ de saisie de la date, et un calendrier déroulant apparaît lorsque l'utilisateur tape sur le champ de saisie. L'utilisateur peut interagir avec l'une ou l'autre forme de saisie de date. Les utilisateurs peuvent saisir les dates soit à l'aide d'un clavier, soit en naviguant dans l'interface utilisateur du calendrier ; les deux options sont immédiatement disponibles lorsque l'on sélectionne un “inputdate” sur desktop.
Le composant Calendar peut être divisé en plusieurs éléments :
Les utilisateurs peuvent naviguer à travers les mois en tapant sur les flèches retour et suivant. L’input date reflète la date sélectionnées dans le calendrier.
Time Picker
Calendrier Simple
Utilisé pour la sélection d’une date.
Calendrier Double
Utilisé pour la sélection d’une durée (date de début - date de fin).
Comportement
Date Picker
Le composant Calendar apparait à la sélection du champs date. Il a le même comportement que les dropdowns, dans le sens où il peut poper en-dessous à droite, à gauche ou au-dessus à droite et en gauche, en fonction de l'espace disponible, de sorte à ce qu'il ne sorte jamais de l'écran.
Calendrier Simple
Sélection d'une date
À la sélection, le calendrier se ferme.
https://user-images.githubusercontent.com/69242017/124895888-3f6ff380-dfdd-11eb-8b69-67bc20fe84c0.mp4
Champs disable
-> Bloquer l'ouverture du calendrier au clic
Calendrier Double
Sélection d'une période
https://user-images.githubusercontent.com/69242017/124901231-1b62e100-dfe2-11eb-91f8-286864a4871e.mp4
Sélection d'une date postérieure
-> allonge la sélection.
https://user-images.githubusercontent.com/69242017/124891500-56144b80-dfd9-11eb-96d6-2278fa0ea0c9.mp4
Sélection d'une date antérieure
-> Reset la sélection et sélectionne une nouvelle date de début.
https://user-images.githubusercontent.com/69242017/124891778-95db3300-dfd9-11eb-9091-7df9c491ca3d.mp4
La date de début est disable (cas particulier : le projet a déjà commencé et on veut empêcher l'admin de modifier la date de publication)
-> La plage ne peut pas être appliquée sur les jours disable.
https://user-images.githubusercontent.com/69242017/124892364-18fc8900-dfda-11eb-81c1-ed922c399d8c.mp4
Date Picker + Time Picker
https://user-images.githubusercontent.com/69242017/124895567-f1f38680-dfdc-11eb-8f29-489bbec5d1e4.mp4