# DateField-Komponente für Stripe-Apps Verwenden Sie die DateField-Komponente, um Datumsinformationen von Nutzerinnen/Nutzern zu erfassen. # 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. So fügen Sie Ihrer App die `DateField` Komponente hinzu: ```js import {DateField} from '@stripe/ui-extension-sdk/ui'; ``` Nachfolgend sehen Sie eine Vorschau einer `DateField`-Komponente mit einem Label und einer Beschreibung: ### DateField-Eigenschaften | Eigenschaft | Typ | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultValue` | (Optional) `string | undefined` Gibt den Anfangswert an, den ein/e Nutzer/in ändern kann. | | `description` | (Optional) `string | undefined` Beschreibender Text, der neben dem Label des Steuerelements angezeigt wird. | | `disabled` | (Optional) `boolean | undefined` Legt fest, ob das Element deaktiviert werden soll. Verhindert die Auswahl. | | `error` | (Optional) `string | undefined` Fehlertext, der unter dem Steuerelement angezeigt wird. | | `hiddenElements` | (Optional) `("label" | "description" | "error")[] | undefined` Blendet die angegebenen Elemente visuell aus. Die ausgeblendeten Elemente sind weiterhin vorhanden und für Screenreader sichtbar. | | `invalid` | (Optional) `boolean | undefined` Legt fest, ob sich das Element in einem ungültigen Status befindet. Diese Eigenschaft kann nicht bearbeitet werden und verhindert die Übermittlung des Formulars nicht. | | `label` | (Optional) `React.ReactNode` Text, der das Steuerelement beschreibt. Wird sichtbar sein und kann angeklickt werden. | | `onChange` | (Optional) `((event: { target: { value: string; }; }) => void) | undefined` Ein onChange-ähnliches Ereignis, das nur ausgelöst wird, wenn die Änderung ein gültiges Datum ergibt. Identisches Verhalten wie bei ``. | | `size` | (Optional) `("small" | "medium" | "large") | undefined` Die Größe der Komponente. | | `value` | (Optional) `string | undefined` Steuert den Text der Eingabe. Wenn Sie diese Eigenschaft übergeben, müssen Sie auch einen `onChange`-Handler übergeben, der den übergebenen Wert aktualisiert. | ## Größe Ein `DateField` jeder Größe entspricht einem `TextField` derselben Größe. Sie können eine Datumseingabe jedoch nicht auf die gleiche Weise ausweiten wie bei `TextField`. ## Fehler Sie können eine Fehlermeldung anzeigen, um auf ein Problem mit dem Datum hinzuweisen. ## Deaktiviert Deaktivieren Sie ein `DateField`, wenn der/die Nutzer/in es nicht ändern darf. ## Elemente ausblenden Sie können Elemente der `DateField`-Komponente, wie z. B. das Label oder die Beschreibung, visuell ausblenden, während die Zugänglichkeit für Screenreader erhalten bleibt. ## Ereignisse Die Eigenschaft `onChange` funktioniert ähnlich wie ein natives ``-HTML-Element. Es gibt nur einen Wert zurück, wenn es sich um ein gültiges Datum handelt. Das bedeutet, dass der `onChange`-Handler nicht mit jedem Tastenanschlag aufgerufen wird und ein `DateField` keine [kontrollierte Eingabe](https://reactjs.org/docs/forms.html#controlled-components) sein kann. Außer `onChange` werden Ereignis-Eigenschaften (beginnend mit `on`) unabhängig für jeden der drei Abschnitte der `DateField`-Komponente ausgelöst: Jahr, Monat und Tag. # 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. So fügen Sie Ihrer App die `DateField` Komponente hinzu: ```js import {DateField} from '@stripe/ui-extension-sdk/ui'; ``` Nachfolgend sehen Sie eine Vorschau einer `DateField`-Komponente mit einem Label und einer Beschreibung: ### DateField-Eigenschaften | Eigenschaft | Typ | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultValue` | (Optional) `string | undefined` Gibt den Anfangswert an, den ein/e Nutzer/in ändern kann. | | `description` | (Optional) `string | undefined` Beschreibender Text, der neben dem Label des Steuerelements angezeigt wird. | | `disabled` | (Optional) `boolean | undefined` Legt fest, ob das Element deaktiviert werden soll. Verhindert die Auswahl. | | `error` | (Optional) `string | undefined` Fehlertext, der unter dem Steuerelement angezeigt wird. | | `hiddenElements` | (Optional) `("label" | "description" | "error")[] | undefined` Blendet die angegebenen Elemente visuell aus. Die ausgeblendeten Elemente sind weiterhin vorhanden und für Screenreader sichtbar. | | `invalid` | (Optional) `boolean | undefined` Legt fest, ob sich das Element in einem ungültigen Status befindet. Diese Eigenschaft kann nicht bearbeitet werden und verhindert die Übermittlung des Formulars nicht. | | `label` | (Optional) `React.ReactNode` Text, der das Steuerelement beschreibt. Wird sichtbar sein und kann angeklickt werden. | | `onChange` | (Optional) `((event: string) => void) | undefined` | | `size` | (Optional) `("small" | "medium" | "large") | undefined` Die Größe der Komponente. | | `value` | (Optional) `string | undefined` Steuert den Text der Eingabe. Wenn Sie diese Eigenschaft übergeben, müssen Sie auch einen `onChange`-Handler übergeben, der den übergebenen Wert aktualisiert. | ## Größe Ein `DateField` jeder Größe entspricht einem `TextField` derselben Größe. Sie können eine Datumseingabe jedoch nicht auf die gleiche Weise ausweiten wie bei `TextField`. ## Fehler Sie können eine Fehlermeldung anzeigen, um auf ein Problem mit dem Datum hinzuweisen. ## Deaktiviert Deaktivieren Sie ein `DateField`, wenn der/die Nutzer/in es nicht ändern darf. ## Elemente ausblenden Sie können Elemente der `DateField`-Komponente, wie z. B. das Label oder die Beschreibung, visuell ausblenden, während die Zugänglichkeit für Screenreader erhalten bleibt. ## Ereignisse Die Eigenschaft `onChange` funktioniert ähnlich wie ein natives ``-HTML-Element. Es gibt nur einen Wert zurück, wenn es sich um ein gültiges Datum handelt. Das bedeutet, dass der `onChange`-Handler nicht mit jedem Tastenanschlag aufgerufen wird und ein `DateField` keine [kontrollierte Eingabe](https://reactjs.org/docs/forms.html#controlled-components) sein kann. Außer `onChange` werden Ereignis-Eigenschaften (beginnend mit `on`) unabhängig für jeden der drei Abschnitte der `DateField`-Komponente ausgelöst: Jahr, Monat und Tag. ## See also - [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md) - [App gestalten](https://docs.stripe.com/stripe-apps/style.md) - [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)