Le composant Sélecteur d'heure permet aux utilisateurs de sélectionner une heure dans une liste déroulante. Ce composant est couramment utilisé dans les applications d'assurance où les utilisateurs doivent indiquer une heure, par exemple pour la planification d'un rendez-vous ou la définition d'un rappel.
Texte d'aide (facultatif) : donne un contexte supplémentaire ou aide l'utilisateur à faire le bon choix.
Entrée de liste déroulante : affiche l'option sélectionnée par l'utilisateur. Les utilisateurs peuvent saisir des données dans le champ de saisie pour trouver une option qui correspond à leur requête. Ils peuvent également saisir une heure personnalisée.
Menu déroulant : affiche une liste des heures pouvant être sélectionnées.
Le composant de sélecteur d'heure peut accueillir une horloge de 12 heures et une horloge de 24 heures. Utilisez le format correspondant à la région dans laquelle votre produit est disponible. Par exemple, les États-Unis utilisent l'horloge de 12 heures.
Dans un système d'horloge de 12 heures, la journée de 24 heures est divisée en deux périodes, « AM » et « PM », et chaque période se compose de 12 heures.
Le format du marqueur de la période du jour est déterminé par les paramètres régionaux de l'utilisateur. Les développeurs n'ont aucun contrôle dessus. Pour les paramètres régionaux en-US, la méthode par défaut pour écrire le marqueur de la période du jour est « AM » et « PM ».
Le format du marqueur de la période du jour est déterminé par les paramètres régionaux de l'utilisateur. Cet exemple utilise les paramètres régionaux en-US._
Jutro comporte des menus déroulants avec des champs de saisie semi-automatique. Les utilisateurs peuvent saisir manuellement du texte pour filtrer les éléments de la liste déroulante. Cette fonctionnalité permet d'aider les utilisateurs à effectuer une sélection dans une longue liste.
Une liste déroulante dont l'option de saisie semi-automatique est activée présente des suggestions lorsque l'utilisateur commence à saisir du texte. Les sélections apparaissent en fonction des caractères saisis par l'utilisateur. Plus les utilisateurs saisissent de caractères dans le champ, plus la liste s'affine.
Un sélecteur d'heure peut inclure une commande de saisie pour le fuseau horaire. Le sélecteur de fuseau horaire prend également en charge la fonctionnalité de saisie semi-automatique, qui permet aux utilisateurs de filtrer la liste d'options.
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.
Ne placez pas de texte de l'espace réservé dans le champ de saisie. Un texte d'espace réservé sollicite la mémoire à court terme des utilisateurs, car il disparaît une fois qu'une valeur est entrée. Il représente également un fardeau supplémentaire pour les utilisateurs souffrant de troubles visuels et cognitifs.
Placez donc plutôt les conseils et les instructions, y compris les exemples de formatage et les exigences, en dehors du champ.
Le champ de saisie du sélecteur d'heure suit les instructions relatives aux champs de texte.
Placez les conseils et les instructions, y compris les exemples de formatage et les exigences, en dehors du champ.
N'ajoutez pas de texte de l'espace réservé au champ de saisie.
Utiliser un texte d'erreur pour guider les utilisateurs
Le texte du message d'erreur indique à l'utilisateur comment corriger l'erreur. Dans le cas du sélecteur d'heure, les erreurs sont souvent liées à un problème qui doit être résolu pour la validation intégrée.
Les champs non valides doivent être clairement indiqués. Dans les sélecteurs comportant plusieurs champs, définissez l'état non valide du champ à l'origine de l'erreur.
Mettez la 1re lettre du 1er mot en majuscule pour le texte d'erreur. Rédigez 1 à 2 phrases courtes et complètes qui se terminent par un point.
Utilisez le texte d'erreur pour guider l'utilisateur et lui proposer une solution.
Ne rédigez pas de messages d'erreur ambigus ou ne laissez pas les utilisateurs deviner comment résoudre un problème.
Utilisez un astérisque (*) pour indiquer les champs obligatoires. L'astérisque précède l'étiquette du champ. Cela permet aux utilisateurs de localiser facilement les champs devant obligatoirement être renseignés en regardant uniquement le caractère le plus à gauche de l'étiquette.
En plus de marquer les champs obligatoires par un astérisque, il est recommandé d'inclure des instructions claires en haut du formulaire, telles que « Tous les champs marqués d'un astérisque sont obligatoires », afin de vous assurer que les utilisateurs comprennent la signification de l'astérisque.
Utilisez un astérisque pour signaler qu'un champ est obligatoire.
N'utilisez pas d'astérisque pour signaler quelque chose qui est facultatif.
Le sélecteur d'heure apparaît sans valeur (par défaut), sans texte de l'espace réservé ou sans entrée renseignée.
Visuel
État
Description
Aucune valeur (par défaut)
Indique à l'utilisateur qu'aucune valeur n'a été sélectionnée et qu'il n'y a pas d'espace réservé.
Espace réservé
Indique à l'utilisateur qu'aucune valeur n'a été sélectionnée. L'espace réservé est grisé.
Entrée renseignée
Indique à l'utilisateur que l'entrée est renseignée.
Les sélecteurs d'heure ont également des états interactifs Activé, Focus, Désactivé, Erreur, Lecture seule et Affichage uniquement.
État
Description
Activé
Indique à l'utilisateur que l'élément est prêt à interagir.
Focus
Indique à l'utilisateur l'élément de l'interface utilisateur sur lequel le système est centré.
Désactivé
Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs locaux. Par exemple, une case à cocher située au-dessus du champ de saisie doit être cochée pour accéder à ce champ de saisie. Un utilisateur peut effectuer une action pour l'activer en interagissant avec la page.
Erreur
Indique que l'utilisateur a commis une erreur de validation. Le texte d'erreur permet aux utilisateurs d'apporter une correction.
Lecture seule
Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs externes. Par exemple, pas d'accès en écriture. Un utilisateur peut effectuer une action pour l'activer, par exemple en contactant un administrateur.
Affichage uniquement
L'état Affichage uniquement est utilisé dans deux cas :
Un élément d'interface utilisateur est utilisé en mode affichage.
Un élément d'interface utilisateur est affiché en mode édition, mais il n'est jamais modifiable.
Cet état était auparavant appelé « lecture seule ».
L'image suivante illustre les états interactifs du sélecteur d'heure.
La BARRE D'ESPACE permet de développer et de réduire le sélecteur d'heure. Les utilisateurs naviguent parmi les options à l'aide des touches fléchées et les sélectionnent à l'aide de la BARRE D'ESPACE ou de la touche ENTRÉE.
aria-labelledby crée une association programmatique entre le champ de saisie et son étiquette. L'attribut WAI-ARIA de aria-autocomplete='list' informe qu'une liste dans laquelle l'utilisateur peut faire un choix apparaîtra, mais la zone de modification reste active. La sélection de l'option « obligatoire » dans Storybook ajoute les attributs « required » et « aria-required="true" » au champ de saisie.
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 dans votre application :
Définissez clairement les exigences de formatage.
Évitez d'utiliser du texte d'espace réservé.
Utilisez un texte significatif pour le texte de l'erreur.
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
Le composant TimePicker définit une clé de traduction :
Clé
Utilisée pour
jutro-components.fields.TimePicker.placeholder
L'espace réservé dans le champ de saisie.
Le composant TimezonePicker définit une clé de traduction pour chaque fuseau horaire disponible. La clé commence toujours par jutro-components.fields.TimezonePicker, suivi du nom du fuseau horaire.
Par exemple, pour le fuseau horaire Africa/Lagos, l'ID de clé de traduction est :
L'heure est formatée en fonction du paramètre régional sélectionné. Par exemple, si le paramètre régional est en-US, l'heure est au format « 5:30 PM ». Si le paramètre régional est pl-PL, l'heure est au format « 17:30 ».
Les entrées Jutro ont implémenté des gestionnaires impératifs en tant que mécanisme permettant d'accéder à certaines fonctionnalités natives communes susceptibles de vous être utiles. Les fonctionnalités suivantes sont disponibles :
Définir le focus pour vous permettre de définir le focus utilisateur dans un composant spécifique
Flou pour supprimer le focus du composant
Faire défiler l'écran jusqu'au composant pour pouvoir amener l'utilisateur à une zone spécifique de la page.
Ces fonctionnalités sont fournies via la propriété ref, qui les expose comme suit :
Bien que certains composants de Jutro puissent fournir des fonctionnalités complémentaires ou une fonction d'aide pour faciliter le processus de validation, il vous appartient, en tant que développeur, de gérer la validation de toute entrée utilisateur (en utilisant ou non les fonctions d'aide complémentaires) et de déterminer les messages d'erreur à afficher.
Le comportement des composants Jutro est basé sur l'implémentation du développeur.
Quand est-ce que des messages d'erreur s'affichent ?
Les messages d'erreur ne s'affichent que lorsque vous les transmettez au composant via la propriété stateMessages. Cette propriété reçoit un objet avec le contenu suivant :
Le composant affiche chaque message d'erreur fourni dans le même ordre que dans la série.
Quand la validation a-t-elle lieu ?
Cette décision vous revient en tant que développeur. Étant donné que les composants ne déterminent pas le moment où la validation est effectuée ou le moment où l'erreur doit être affichée, vous devez implémenter la logique pour la traiter en fonction des exigences du projet, par exemple lorsque l'utilisateur modifie le contenu, lorsque le composant active une autre fenêtre et lors de la soumission du formulaire.
Si l'utilisateur saisit une heure non valide ou une heure qui est en dehors des limites minimum/maximum, une erreur de validation est générée pour le troisième paramètre dans le gestionnaire onChange. Les paramètres se présentent comme suit :
{ errorCode:ERROR.<ERROR_CODE_GOES_HERE>, }
The error code can be one of the following:
INVALID_TIME - when the user enters an invalid time, for example "25:67 AM".
MIN_TIME_EXCEEDED - when the user enters a time that is before minTime.
MAX_TIME_EXCEEDED - when the user enters a time that is after maxTime.
Consultez la section Utilisation pour découvrir comment concevoir correctement un sélecteur d'heure et connaître les différentes options de configuration que nous proposons.
Vous pouvez autoriser l'utilisateur à choisir une heure à l'aide du composant TimePicker. Utilisez ensuite le gestionnaire pour obtenir l'heure sélectionnée.
import{TimePicker}from'@jutro/components/new'; exportfunctionDinnerTimeSelector(){ functionhandleTimeChange(event, value){ console.log('The user selected the following time for dinner:', value); // displays: { hours: 19, minutes: 30 } } return( <TimePicker label={{ id:'time-picker-label', defaultMessage:'Enter dinner time', }} name="Dinner time picker" onChange={handleTimeChange} /> ); }
Vous pouvez autoriser l'utilisateur à choisir une heure et un fuseau horaire à l'aide des composants TimePicker et TimezonePicker. Utilisez ensuite les gestionnaires pour obtenir l'heure et le fuseau horaire sélectionnés.
import{TimePicker,TimezonePicker}from'@jutro/components/new'; exportfunctionDinnerTimeSelector(){ functionhandleTimeChange(event, value){ console.log('The user selected the following time for dinner:', value); // displays: { hours: 19, minutes: 30 } } functionhandleTimezoneChange(event, value){ console.log('The user selected the following timezone for dinner:', value); // displays: { timezone: 'Europe/Warsaw' } } return( <> <TimePicker label={{ id:'time-picker-label', defaultMessage:'Enter dinner time', }} name="Dinner time picker" onChange={handleTimeChange} /> <TimezonePicker label={{ id:'timezone-picker-label', defaultMessage:'Set timezone for dinner time', }} initialValue={{timezone:'Europe/Warsaw'}} onChange={handleTimezoneChange} /> </> ); }
Vous pouvez contrôler le sélecteur d'heure en transmettant la propriété value. Ceci est utile si vous souhaitez utiliser le sélecteur d'heure comme composant contrôlé.
Il est préférable d'utiliser l'API Intl.DateTimeFormat pour formater la valeur du sélecteur d'heure car :
Chaque fois que toLocaleString est appelé, il doit effectuer une recherche dans une grande base de données de chaînes de localisation, ce qui peut être inefficace. Lorsque la méthode est appelée plusieurs fois avec les mêmes arguments, il est préférable de créer un objet Intl.DateTimeFormat et d'utiliser sa méthode format(), car un objet DateTimeFormat se souvient des arguments qui lui ont été transmis et peut décider de mettre en cache une partie de la base de données, de sorte que les appels de format ultérieurs puissent rechercher des chaînes de localisation dans un contexte plus contraint.
Vous pouvez contrôler le sélecteur de fuseau horaire en transmettant la propriété value. Ceci est utile si vous souhaitez utiliser le sélecteur de fuseau horaire comme composant contrôlé.
Notez que la propriété value est un objet avec une propriété appelée timezone.
Spécifier l'intervalle de temps, la plage horaire et les fuseaux horaires
Pour le sélecteur d'heure, vous pouvez spécifier :
La plage de temps « min » et « max », par exemple « 9h00 » et « 17h00 »
L'intervalle de temps, par exemple 15 minutes
Pour le sélecteur de fuseau horaire, vous pouvez limiter la liste des fuseaux horaires disponibles. Transmettez simplement une série de fuseaux horaires IANA.
Mettre à jour le chemin d’importation pour le composant TimePicker
Un chemin d’importation à partir de @jutro/components a été ajouté pour le composant TimePicker.
L’ancien chemin d’importation à partir de @jutro/components/new sera supprimé dans une prochaine version majeure.
Il est conseillé aux utilisateurs d’exécuter la commande suivante pour appliquer un codemod afin de mettre à jour les chemins d’importation dans votre code.
Mettre à jour le chemin d’importation pour le composant TimezonePicker
Un chemin d’importation à partir de @jutro/components a été ajouté pour le composant TimezonePicker.
L’ancien chemin d’importation à partir de @jutro/components/new sera supprimé dans une prochaine version majeure.
Il est conseillé aux utilisateurs d’exécuter la commande suivante pour appliquer un codemod afin de mettre à jour les chemins d’importation dans votre code.
Structure du composant Sélecteur d'heure.
Le format du marqueur de la période du jour est déterminé par les paramètres régionaux de l'utilisateur. Cet exemple utilise les paramètres régionaux en-US._
