Passer au contenu principal

Sélecteur de date

Sélecteur de date dans Storybook

Utilisation​

Présentation​

Le sélecteur de date est un composant constitué de deux éléments principaux : un champ de sélecteur de date et un calendrier déroulant. Le composant Calendrier représente visuellement une date et offre une expérience de navigation cohérente entre les affichages des jours, des mois et des années. Ce calendrier intégré permet aux utilisateurs de parcourir et de sélectionner des dates dans une vue.

Quand l'utiliser​

  • Pour sélectionner une date proche de la date du jour.
  • Pour sélectionner une date et l'enregistrer dans un champ de saisie.
  • Pour parcourir différentes vues de dates, telles que les jours, les mois et les années.
  • Pour une représentation visuelle de la date.

Quand ne pas l'utiliser​

  • Pour sélectionner une date dans un passé ou un futur lointain. Dans ce cas, utilisez la saisie de date.
  • Pour sélectionner une plage de dates. Dans ce cas, utilisez la plage de dates.
  • Pour sélectionner uniquement le mois et l'année, sans jour spécifique. Dans ce cas, utilisez le sélecteur de mois.
  • Pour sélectionner uniquement l'année, sans spécifier le mois ou le jour. Dans ce cas, utilisez le sélecteur d'année.
  • Pour sélectionner une heure spécifique. Dans ce cas, utilisez le sélecteur d'heure.
Voir également​

Formatage​

Structure​

Image représentant la structure du composant Sélecteur de date

Le composant Sélecteur de date est constitué des éléments suivants :

  1. Champ du sélecteur de date : champ de saisie dans lequel l'utilisateur peut entrer manuellement le jour, le mois et l'année.
  2. Icône Calendrier : bouton avec icône qui déclenche le calendrier déroulant lorsque l'utilisateur clique dessus.
  3. Bouton Mois précédent : commande de navigation permettant d'afficher et de sélectionner les dates du mois précédent.
  4. Bouton Mois : commande permettant de sélectionner un autre mois.
  5. Bouton Année : commande permettant de sélectionner une année différente.
  6. Bouton Mois suivant : commande de navigation permettant d'afficher et de sélectionner les dates du mois suivant.
  7. Date du jour : date du jour, avec une ligne affichée en dessous pour l'indiquer visuellement.
  8. Date sélectionnée : date spécifique choisie par l'utilisateur et mise en surbrillance ou mise en évidence dans l'interface du sélecteur de date.
  9. Bouton « Aujourd'hui » : bouton qui renseigne automatiquement le champ du sélecteur de date avec le jour, le mois et l'année du jour lorsque l'utilisateur clique dessus.

Format de date​

Le format de la date affichée dans le sélecteur de date dépend des paramètres régionaux de l'utilisateur. Cela signifie que le format de date varie en fonction de la localisation et des paramètres linguistiques de l'utilisateur.

Par exemple, aux États-Unis, le format de date est généralement MM/DD/YYYY, alors que dans de nombreux pays européens, le format est DD/MM/YYYY.

Le format de date est affiché sous la forme d'un espace réservé dans le sélecteur de date pour aider l'utilisateur à saisir la date. Cela garantit que le format reste visible tout au long du processus de saisie.

Image représentant un utilisateur saisissant du texte dans le champ du sélecteur de date
Un espace réservé dans le champ de saisie aide les utilisateurs à choisir un format de date attendu au fur et à mesure qu'ils saisissent des données.

Contenu​

Directives générales relatives à la rédaction​

  • Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
  • Utilisez des verbes au présent et la forme active dans la plupart des cas.
  • Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
  • Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
  • Utilisez des termes et des phrases concis.

Inclure une étiquette​

Renseignez un texte clair et descriptif pour l'étiquette du sélecteur de date. Cette étiquette doit indiquer sa fonction et le type spécifique de date sélectionné.

Placez une étiquette permanente en dehors du champ.
N'utilisez pas de texte de l'espace réservé pour remplacer l'étiquette.

Ajoutez un texte d'aide si cela est utile​

Utilisez le texte d'aide pour fournir du contexte et indiquer la date à sélectionner. Voici quelques exemples de ce que vous pouvez inclure :

  • Des conseils qui aident l'utilisateur à choisir la date appropriée
  • Plus de contexte pour expliquer pourquoi l'utilisateur doit sélectionner une date spécifique

N'utilisez le texte d'aide que pour les informations pertinentes. Évitez de reformuler les détails qui apparaissent dans l'étiquette. Rédigez le texte d'aide en 1 ou 2 phrases courtes et complètes se terminant par un point. Mettez une majuscule en début de phrase.

N'utilisez pas de texte d'aide pour indiquer le contexte.
N'utilisez pas le texte d'aide pour simplement reformuler les mêmes informations que celles qui apparaissent dans l'étiquette.

Comportements​

États​

Le composant Sélecteur de date se comporte comme un champ de saisie, avec les mêmes états interactifs.

Interactions​

Souris​

Les utilisateurs peuvent entrer le jour, le mois et l'année manuellement dans le champ du sélecteur de date ou cliquer sur l'icône Calendrier pour sélectionner le jour, le mois et l'année dans une liste déroulante.

Image représentant un utilisateur interagissant avec le sélecteur de date à l'aide d'une souris

Clavier​

Le sélecteur de date est développé et réduit avec Spacebar. Les utilisateurs naviguent parmi les options à l'aide des touches fléchées et les sélectionne à l'aide de la touche Spacebar ou Enter.

Un widget de calendrier apparaît lorsque l'utilisateur utilise la touche de tabulation pour accéder au champ de saisie du sélecteur de date. La date du jour est mise en surbrillance et les utilisateurs qui ne se servent que du clavier peuvent entrer la date manuellement ici. Les utilisateurs peuvent également placer le focus clavier sur le widget en appuyant sur la touche fléchée vers le bas lorsqu'il est développé. Parcourez le calendrier avec les touches fléchées. Il est possible de mettre les boutons « Précédent », « Mois », « Année » et « Suivant » en évidence via la touche Tab lorsque le widget est ouvert.

Lecteur d'écran​

Les utilisateurs sont informés de la valeur de date préremplie lorsqu'ils accèdent au champ de saisie du sélecteur de date à l'aide de la touche Tabulation, ainsi que du fait que cette valeur est actuellement sélectionnée. La date peut être saisie manuellement à partir de ce champ de saisie. Bien que le focus reste placé sur la date préremplie, un widget de calendrier est également disponible. Les utilisateurs peuvent également déplacer le focus sur le widget en appuyant sur la touche fléchée vers le bas. La navigation dans la partie calendrier du widget s'effectue à l'aide des touches fléchées, et la valeur actuellement sélectionnée est lue par les lecteurs d'écran via un attribut WAI-ARIA aria-label. Il est possible de mettre les boutons « Précédent », « Mois », « Année » et « Suivant » en évidence via la touche Tab lorsque le widget est ouvert. Le sélecteur de date React n'active actuellement pas la navigation au clavier vers le lien « Aujourd'hui ».

Gestion des entrées​

Le composant Sélecteur de date permet de déplacer le caret (curseur de texte clignotant) entre les différentes sections de la date (MM/JJ/AAAA). Toutefois, les utilisateurs ne peuvent pas supprimer des chiffres individuels au sein d’une section. La suppression d’un chiffre efface la section entière (MM, JJ ou AAAA), obligeant les utilisateurs à la saisir de nouveau. Ce comportement est constant dans tous les composants de date, où le masque de saisie formate la saisie au fur et à mesure de la saisie de l’utilisateur.

Accessibilité​

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

  • Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
  • Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
  • Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
  • Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Lorsque vous utilisez ce composant, assurez-vous que l'étiquette indique clairement la date que l'utilisateur doit saisir ou sélectionner.