mittwald Flow Logo

Components

DateRangePicker

Der DateRangePicker erlaubt die Eingabe einer Zeitspanne per Tastatur oder die Auswahl über einen visuellen Kalender.GitHub
Zeitraum(optional)

Playground

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

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

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

<DateRangePicker>
  <Label>Zeitraum</Label>
</DateRangePicker>

Min- und Max-Values

Der auswählbare Datumsbereich lässt sich über minValue und maxValue begrenzen.

Zeitraum(optional)

Disabled

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

Zeitraum(optional)

Mit FieldDescription

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

Zeitraum(optional)Weitere Informationen

Kombiniere mit ...

ContextualHelp

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

Zeitraum(optional)

React Hook Form

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

Zeitraum

Overview