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
Spécifie la valeur initiale modifiable par un utilisateur. |
| 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
Texte d’erreur qui sera affiché sous le contrôle. |
| 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
Un événement similaire à onChange qui se déclenche uniquement lorsque la modification aboutit à une date valide. Comportement identique à |
| Facultatif
La taille du composant. |
| Facultatif
Contrôle le texte saisi. Lorsque vous transmettez cette propriété, vous devez également transmettre un gestionnaire |
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); }} />