mittwald Flow Logo

Components

DatePicker

Der DatePicker ermöglicht die Eingabe eines Datums per Tastatur oder die Auswahl über einen visuellen Kalender.GitHub
Datum(optional)

Playground

Verwende <DatePicker />, um einen DatePicker darzustellen. Nutze ein <Label />, um Informationen zu vermitteln, die das Verständnis der Eingabeanforderungen erleichtern.

Die Values des DatePickers sind Objekte aus dem @internationalized/date Package.

Datum(optional)
import {
  DatePicker,
  Label,
} from "@mittwald/flow-react-components";

<DatePicker>
  <Label>Datum</Label>
</DatePicker>

Min- und Max-Values

Das wählbare Datum lässt sich über minValue und maxValue begrenzen.

Datum(optional)

Verfügbare Daten

Über das isDateUnavailable Property kann die Datumsauswahl eingeschränkt werden.

DatumEs kann nur der 1. jeden Monats ausgewählt werden

Disabled

Ist der DatePicker disabled, ist keine Interaktion möglich.

Datum(optional)

Mit FieldDescription

Um wichtige Hinweise zum DatePicker bereitzustellen, kann unterhalb eine <FieldDescription /> eingebaut werden.

Datum(optional)Weitere Informationen

Kombiniere mit ...

ContextualHelp

Benutze das ContextualHelp, wenn zusätzliche Informationen bereitgestellt werden sollen, die zu umfangreich für die FieldDescription sind.

Datum(optional)

React Hook Form

Weitere Details zur Formularlogik und -validierung sind in der Component Form (React Hook Form) zu finden.

Datum

Overview