Flow

Components

DateRangePicker

Der DateRangePicker wird dafür verwendet eine Zeitspanne zwischen zwei Daten auszuwählen.GitHub
Zeitraum (optional)

Beispiel

Bei den Values des DatePickers handelt es sich um Objekte aus dem @internationalized/date Package.

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

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

Min- und Max-Values

Der Bereich, aus dem das Datum gewählt wird, kann über minValue bzw maxValue eingeschränkt werden.

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

<DateRangePicker minValue={today(getLocalTimeZone())}>
  <Label>Zeitraum</Label>
</DateRangePicker>

Disabled

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

<DateRangePicker isDisabled>
  <Label>Zeitraum</Label>
</DateRangePicker>
Feedback geben