Composant DateField pour les applications Stripe
Utilisez le composant DateField pour collecter des dates auprès des utilisateurs.
Pour ajouter le composant DateField à votre application :
import {DateField} from '@stripe/ui-extension-sdk/ui';
Voici un aperçu d’un composant DateField avec un libellé et une description :
<DateField label="Date of birth" description="Enter your birthday" />
Propriétés DateField
| Propriété | Type |
|---|---|
| Facultatif
Specifies the initial value that a user can change. |
| Facultatif
Texte descriptif qui sera affiché à côté du libellé du contrôle. |
| Facultatif
Indique si l’élément doit être désactivé ou non. Empêche la sélection. |
| Facultatif
Error text that will be rendered below the control. |
| Facultatif
Masque visuellement les éléments spécifiés. Les éléments masqués sont toujours présents et visibles des lecteurs d’écran. |
| Facultatif
Indique si l’élément est à l’état non valide ou non. Il s’agit uniquement d’une propriété d’affichage, qui n’empêche pas la soumission du formulaire. |
| Facultatif
Texte décrivant le contrôle. Il est à la fois visible et cliquable. |
| Facultatif
An onChange-alike event that fires only when the change results in a valid date. Identical behavior to |
| Facultatif
La taille du composant. |
| Facultatif
Controls the input’s text. When you pass this prop, you must also pass an |
Taille
Un composant DateField d’une taille donnée correspond à un TextField de la même taille. Cependant, contrairement au composant TextField, vous ne pouvez pas augmenter librement sa largeur.
<DateField label="Date of birth (small)" description="Enter your birthday" size="small" /> <DateField label="Date of birth (medium)" description="Enter your birthday" size="medium" /> <DateField label="Date of birth (large)" description="Enter your birthday" size="large" />
Erreur
Vous pouvez afficher un message d’erreur pour indiquer un problème de date.
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2099-02-31" invalid error="Invalid birthday" />
Désactivé
Désactivez les composants DateField que l’utilisateur n’a pas à modifier.
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2011-09-01" disabled />
Masquer des éléments
Vous pouvez masquer des éléments du composant DateField, tels que le libellé ou la description, tout en garantissant l’accessibilité aux personnes qui utilisent un lecteur d’écran.
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2011-09-01" hiddenElements={['description', 'label']} />
Événements
La propriété onChange fonctionne comme un élément HTML <input type="date" /> natif. Elle ne renvoie une valeur que lorsque la date est valide. Cela signifie que le gestionnaire de onChange n’est pas appelé chaque fois que l’utilisateur appuie sur une touche du clavier. Un composant DateField ne peut pas non plus être un composant contrôlé.
<DateField label="Date of birth" description="Enter your birthday" onChange={(e) => { console.log(e.target.value); }} />
Les propriétés d’événements (commençant par on), à l’exception de onChange, sont envoyées indépendamment pour chacune des trois sections du composant DateField : année, mois et jour.
<DateField label="Date of birth" description="Enter your birthday" onChange={(e) => { console.log('change', e); }} />