DateField
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" />
Props
Prop | Type | Description |
---|---|---|
aria-label |
| Text that describes the control. Only visible to screen readers, and is not clickable. Should not be used if `label` is set. |
defaultValue |
| A default value that a user can change |
description |
| Descriptive text that will be rendered adjacent to the control's label |
disabled |
| |
error |
| Error text that will be rendered below the control |
hiddenElements |
| Visually hides the specified elements. The hidden elements will still be present and visible to screen readers |
invalid |
| Programmatically mark the value as invalid |
label |
| Text that describes the control. Will be both visible and clickable. |
onChange |
| An onChange-alike event that fires only when the change results
in a valid date. Identical behavior to <input type="date" /> |
size |
| The size of the input |
Taille
Un 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ésactivation
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 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" onFocus={(e) => { console.log('focus', e); }} onBlur={(e) => { console.log('blur', e); }} onKeyPress={(e) => { console.log('keypress', e); }} onKeyDown={(e) => { console.log('keydown', e); }} onKeyUp={(e) => { console.log('keyup', e); }} />