DateField

Verwenden Sie die DateField-Komponente, um Datumsinformationen von Nutzerinnen/Nutzern zu erfassen.

SDK-Version

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
`defaultValue`	Optional `string \| undefined` Specifies the initial value that a user can change.
`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` An onChange-alike event that fires only when the change results in a valid date. Identical behavior to `<input type="date" />`.
`size`	Optional `("small" \| "medium" \| "large") \| undefined` Die Größe der Komponente.
`value`	Optional `string \| undefined` Controls the input’s text. When you pass this prop, you must also pass an `onChange` handler that updates the passed value.

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"
  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);
  }}
/>