La saisie de date combine trois champs de saisie distincts (jour, mois et année) en un seul composant de date. À l'aide de ce composant, les utilisateurs saisissent des dates sans rapport avec la date du jour, comme des dates de naissance.
Lorsque la date est bien connue de l'utilisateur, par exemple une date de naissance ou d'expiration d'une carte de crédit.
Lorsque la saisie d'une date précise est requise et que la sélection du calendrier peut s'avérer fastidieuse. Par exemple, si l'utilisateur doit saisir une date passée ou future lointaine, il peut être plus rapide et plus efficace de saisir manuellement la date.
Pour les dates proches de la date actuelle (par exemple, dans les prochaines semaines ou les prochains mois). Utilisez plutôt le sélecteur de date.
S'il est peu probable que la date soit retenue par l'utilisateur (par exemple, si un rendez-vous est fixé plusieurs mois plus tard). Utilisez plutôt le sélecteur de date.
Étiquette : description claire et concise qui présente l'objectif et le contexte du champ de saisie de date. L'étiquette aide les utilisateurs à comprendre la date qu'ils doivent saisir.
Champ Jour : champ de saisie dans lequel l'utilisateur peut saisir manuellement le jour.
Champ Mois : champ de saisie dans lequel l'utilisateur peut saisir manuellement le mois.
Champ Année : champ de saisie dans lequel l'utilisateur peut saisir manuellement l'année.
Le composant de saisie de date s'adapte aux paramètres régionaux de l'utilisateur, en présentant les champs Jour, Mois et Année dans l'ordre qui lui est le plus familier. Par exemple :
États-Unis : MM/JJ/AAAA
Royaume-Uni : JJ/MM/AAAA
Japon : AAAA/MM/JJ
Le composant ajuste automatiquement l'ordre des champs et les libellés pour qu'ils correspondent au format de date approprié pour la région de l'utilisateur.
L'ordre des entrées change en fonction des paramètres régionaux. Exemples pour l'Europe (à gauche) et les États-Unis (à droite).
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.
Placez une étiquette claire et visible en dehors du champ de saisie de la date. Un champ de saisie sans étiquette est ambigu et ne permet pas l'accessibilité.
Placez une étiquette permanente en dehors du champ.
Ne supposez pas que le champ est explicite sans étiquette.
Lorsque vous utilisez une entrée de date, incluez le format de date comme texte d'aide. Le fait de s'appuyer uniquement sur l'espace réservé au texte pour communiquer le format de date est problématique, car le texte de l'espace réservé disparaît une fois que l'utilisateur commence à saisir quelque chose. Les utilisateurs peuvent alors ne plus se souvenir du format attendu.
Le nom accessible du composant de saisie numérique est issu d'un attribut aria-label. La modification de la valeur textuelle de l'élément de l'étiquette modifie également la valeur du nom accessible. L'attribut aria-required='true' par défaut prend la valeur « false » lorsque la case requise est cochée dans Storybook.
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.
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.
Determines whether to switch the focus between fields automatically. If true, the focus is set on the next field after typing the exact amount of characters as set in the max length attribute.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Initial value of the input. The value must be an object with day, month, and year properties, where month is indexed from 1. If the value prop is specified along with this prop, this prop's value is discarded.
Value of the input. Takes precedence over initialValue. The value must be in object format with day, month, and year property where month is indexed from 1. If this prop is passed, the component works in controlled mode and its value changes only if this prop changes.
En fonction des paramètres régionaux, les champs de saisie sont réorganisés pour correspondre au format de date régional. Cela affecte également le format des propriétés displayOnly et readOnly.
Le composant DateInput fournit un mécanisme de validation utilisant la propriété onChange. Cette propriété accepte les paramètres event, value et errorCode. Les valeurs errorCode peuvent être :
INVALID_DATE : le format de date est incorrect, par exemple, la valeur saisie pour le mois est supérieure à 12.
MIN_EXCEEDED : la valeur saisie est inférieure à la valeur minimale définie par les propriétés minDate, minMonth, ou minYear.
MAX_EXCEEDED : la valeur saisie est supérieure à la valeur maximale définie par les propriétés maxDate, maxMonth, ou maxYear.
Vous pouvez consulter l'exemple Min/Max pour voir comment fonctionne la validation.
Vous pouvez utiliser la propriété displayFormat pour modifier le format des dates lors de l'utilisation des propriétés readOnly ou displayOnly. Il existe cinq possibilités différentes :
Vous pouvez utiliser la propriété variant pour créer un composant d'entrée ayant différents champs :
importReactfrom'react'; import{DateInput}from'@jutro/components'; exportconstBasicDateInput=()=>{ return( <divstyle={{display:'flex',gap:'2rem',flexWrap:'wrap'}}> <DateInputlabel="This is a simple date input"/> <DateInputlabel="This is a month and year input"variant='month'/> <DateInputlabel="This is a year input"variant='year'/> </div> ); };
Vous pouvez utiliser la propriété stateMessages pour afficher une erreur sur le composant DateInput.
importReactfrom'react'; import{DateInput}from'@jutro/components'; exportconstErrorDateInput=()=>{ return( <div> <DateInput label="This is a date input" stateMessages= {{ error:['This is an error message'], }} /> </div> ); };
Vous pouvez définir une date minimale et maximale pour le composant DateInput à l'aide des propriétés minDate et maxDate. Vous pouvez également définir des valeurs indépendantes, pour les mois et les années, à l'aide des éléments minMonth, minYear, maxMonth et maxYear. L'exemple ci-dessous vérifie quand il perd le focus si la valeur de l'année est comprise entre 2000 et 2024, et si elle n'est pas entre ces valeurs, une erreur s'affiche.
importReact,{ useState }from'react'; import{DateInput}from'@jutro/components'; exportconstMinMaxDateInput=()=>{ const[stateMessages, setStateMessages]=useState({}); consthandleChange=(event, value, errorObject)=>{ const errorCode = errorObject?.errorCode; if(errorCode ==='INVALID_DATE'){ setStateMessages({ error:['Please enter a valid date.'], }); return; } if(errorCode ==='MIN_EXCEEDED'|| errorCode ==='MAX_EXCEEDED'){ setStateMessages({ error:[`The year must be between 2000 and 2024.`], }); }else{ setStateMessages({}); } }; return( <div> <DateInput label="Enter a date between year 2000 and year 2024" minDate={{day:1,month:1,year:2000}} maxDate={{day:31,month:12,year:2024}} onChange={handleChange} stateMessages={stateMessages} /> </div> ); };
Un chemin d’importation à partir de @jutro/components a été ajouté pour le composant DateInput.
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.
Un nouveau composant @jutro/components/new/DateInput a été introduit pour remplacer les composants précédents @jutro/components/SimpleDateField et @jutro/components/SimpleMonthYearField, qui sont obsolètes.
L'ordre des entrées change en fonction des paramètres régionaux. Exemples pour l'Europe (à gauche) et les États-Unis (à droite).
