DateField
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" />
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 |
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 bereitstellen, 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 soll.
<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 Bildschirmleser 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-Props (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" 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); }} />