DateField-Komponente für Stripe-Apps
Verwenden Sie die DateField-Komponente, um Datumsinformationen von Nutzerinnen/Nutzern zu erfassen.
So fügen Sie Ihrer App die DateField Komponente hinzu:
import {DateField} from '@stripe/ui-extension-sdk/ui';
Nachfolgend sehen Sie eine Vorschau einer DateField-Komponente mit einem Label und einer Beschreibung:
<DateField label="Date of birth" description="Enter your birthday" />
DateField-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Optional
Specifies the initial value that a user can change. |
| Optional
Beschreibender Text, der neben dem Label des Steuerelements angezeigt wird. |
| Optional
Legt fest, ob das Element deaktiviert werden soll. Verhindert die Auswahl. |
| Optional
Fehlertext, der unter dem Steuerelement angezeigt wird. |
| Optional
Blendet die angegebenen Elemente visuell aus. Die ausgeblendeten Elemente sind weiterhin vorhanden und für Screenreader sichtbar. |
| Optional
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. |
| Optional
Text, der das Steuerelement beschreibt. Wird sichtbar sein und kann angeklickt werden. |
| Optional
An onChange-alike event that fires only when the change results in a valid date. Identical behavior to |
| Optional
Die Größe der Komponente. |
| Optional
Controls the input’s text. When you pass this prop, you must also pass an |
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.
<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" />
Fehler
Sie können eine Fehlermeldung anzeigen, um auf ein Problem mit dem Datum hinzuweisen.
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2099-02-31" invalid error="Invalid birthday" />
Deaktiviert
Deaktivieren Sie ein DateField, wenn der/die Nutzer/in es nicht ändern darf.
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2011-09-01" disabled />
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.
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2011-09-01" hiddenElements={['description', 'label']} />
Ereignisse
Die Eigenschaft onChange funktioniert ähnlich wie ein natives <input type="date" />-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 sein kann.
<DateField label="Date of birth" description="Enter your birthday" onChange={(e) => { console.log(e.target.value); }} />
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.
<DateField label="Date of birth" description="Enter your birthday" onChange={(e) => { console.log('change', e); }} />