# Composant DateField pour les applications Stripe

Utilisez le composant DateField pour collecter des dates auprès des utilisateurs.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/datefield?app-sdk-version=8.

Pour ajouter le composant `DateField` à votre application :

```js
import {DateField} from '@stripe/ui-extension-sdk/ui';
```

Voici un aperçu d’un composant `DateField` avec un libellé et une description :

### Propriétés DateField

| Propriété        | Type                                                                                                                                                                                                                                                                  |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultValue`   | (Facultatif)
  `string | undefined`

  Spécifie la valeur initiale modifiable par un utilisateur.                                                                                                                                                                     |
| `description`    | (Facultatif)
  `string | undefined`

  Texte descriptif qui sera affiché à côté du libellé du contrôle.                                                                                                                                                               |
| `disabled`       | (Facultatif)
  `boolean | undefined`

  Indique si l’élément doit être désactivé ou non. Empêche la sélection.                                                                                                                                                        |
| `error`          | (Facultatif)
  `string | undefined`

  Texte d’erreur qui sera affiché sous le contrôle.                                                                                                                                                                              |
| `hiddenElements` | (Facultatif)
  `("label" | "description" | "error")[] | undefined`

  Masque visuellement les éléments spécifiés. Les éléments masqués sont toujours présents et visibles des lecteurs d’écran.                                                                       |
| `invalid`        | (Facultatif)
  `boolean | undefined`

  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.                                                                         |
| `label`          | (Facultatif)
  `React.ReactNode`

  Texte décrivant le contrôle. Il est à la fois visible et cliquable.                                                                                                                                                               |
| `onChange`       | (Facultatif)
  `((event: {     target: {         value: string;     }; }) => void) | undefined`

  Un événement similaire à onChange qui se déclenche uniquement lorsque la modification aboutit à une date valide. Comportement identique à `<input type="date" />`. |
| `size`           | (Facultatif)
  `("small" | "medium" | "large") | undefined`

  La taille du composant.                                                                                                                                                                                |
| `value`          | (Facultatif)
  `string | undefined`

  Contrôle le texte saisi. Lorsque vous transmettez cette propriété, vous devez également transmettre un gestionnaire `onChange` qui met à jour la valeur transmise.                                                             |

## 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.

## Erreur

Vous pouvez afficher un message d’erreur pour indiquer un problème de date.

## Désactivé

Désactivez les composants `DateField` que l’utilisateur n’a pas à modifier.

## 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.

## É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é](https://reactjs.org/docs/forms.html#controlled-components).

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`&nbsp;: année, mois et jour.


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/datefield?app-sdk-version=9.

Pour ajouter le composant `DateField` à votre application&nbsp;:

```js
import {DateField} from '@stripe/ui-extension-sdk/ui';
```

Voici un aperçu d’un composant `DateField` avec un libellé et une description&nbsp;:

### Propriétés DateField

| Propriété        | Type                                                                                                                                                                                                      |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultValue`   | (Facultatif)
  `string | undefined`

  Spécifie la valeur initiale modifiable par un utilisateur.                                                                                                         |
| `description`    | (Facultatif)
  `string | undefined`

  Texte descriptif qui sera affiché à côté du libellé du contrôle.                                                                                                   |
| `disabled`       | (Facultatif)
  `boolean | undefined`

  Indique si l’élément doit être désactivé ou non. Empêche la sélection.                                                                                            |
| `error`          | (Facultatif)
  `string | undefined`

  Texte d’erreur qui sera affiché sous le contrôle.                                                                                                                  |
| `hiddenElements` | (Facultatif)
  `("label" | "description" | "error")[] | undefined`

  Masque visuellement les éléments spécifiés. Les éléments masqués sont toujours présents et visibles des lecteurs d’écran.           |
| `invalid`        | (Facultatif)
  `boolean | undefined`

  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.             |
| `label`          | (Facultatif)
  `React.ReactNode`

  Texte décrivant le contrôle. Il est à la fois visible et cliquable.                                                                                                   |
| `onChange`       | (Facultatif)
  `((event: string) => void) | undefined`                                                                                                                                                    |
| `size`           | (Facultatif)
  `("small" | "medium" | "large") | undefined`

  La taille du composant.                                                                                                                    |
| `value`          | (Facultatif)
  `string | undefined`

  Contrôle le texte saisi. Lorsque vous transmettez cette propriété, vous devez également transmettre un gestionnaire `onChange` qui met à jour la valeur transmise. |

## 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.

## Erreur

Vous pouvez afficher un message d’erreur pour indiquer un problème de date.

## Désactivé

Désactivez les composants `DateField` que l’utilisateur n’a pas à modifier.

## 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.

## É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é](https://reactjs.org/docs/forms.html#controlled-components).

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`&nbsp;: année, mois et jour.


## See also

- [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md)
- [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md)
- [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)