Date Picker et Time Picker

[mabetar2]

Besoin

Sélection d'une donnée temporelle :

• Date unique, ex: date de publication d'un article...
• Date de début et de fin, ex: date de début et de fin d'un projet...
• Date + heure, ex: publication d'un projet...
• Heure, ex: variante de date et heure de publication

Sur Figma

• Doc générale (Saisie de donnée > artboards "Calendrier" et "Time Picker")
• Composant Input pour les états des inputs Date, DateRange, DateTime et Time
• Calendrier (voir rectangle rouge "pour les devs")
• Time Picker

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 :

• input (Date | DateRange)
• Calendar (Simple | Double) : avec un atome CalendarDay (les jours, avec leurs états pour la sélection)

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 :

• Input (Time)
• Time Slot (les heures, avec les états de sélections)

Ensemble, ils forment le composant Date & Time (sélection d'une date et d'une heure) :

• Input (Date & Time)
• Calendar (Simple)
• Time Picker

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 :

• Le header, comprenant le mois + l'année, la pagination et les jours de la semaine
• Le contenu, comprenant l'atom CalendarDay, disponible en plusieurs états

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