Flow

Components

TimeField

Das TimeField wird dafür verwendet eine Uhrzeit auszuwählen.GitHub
Uhrzeit (optional)
––
––

Beispiel

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

Uhrzeit (optional)
––
––
import Label from "@mittwald/flow-react-components/Label";
import TimeField from "@mittwald/flow-react-components/TimeField";

<TimeField>
  <Label>Uhrzeit</Label>
</TimeField>

Min- und Max-Values

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

Uhrzeit (optional)Zwischen 8 und 16 Uhr
––
––
import Label from "@mittwald/flow-react-components/Label";
import { Time } from "@internationalized/date";
import { TimeField } from "@mittwald/flow-react-components/TimeField";
import { FieldDescription } from "@mittwald/flow-react-components/FieldDescription";

<TimeField
  minValue={new Time(8, 0)}
  maxValue={new Time(16, 0)}
>
  <Label>Uhrzeit</Label>
  <FieldDescription>Zwischen 8 und 16 Uhr</FieldDescription>
</TimeField>

Granularity

Über das granularity Property kann ausgewählt werden, ob nur Stunden oder auch Minuten oder sogar Sekunden ausgewählt werden können.

Stunde (optional)
––
Stunde und Minute (optional)
––
––
Stunde, Minute und Sekunde (optional)
––
––
––
import Label from "@mittwald/flow-react-components/Label";
import { TimeField } from "@mittwald/flow-react-components/TimeField";

<Row>
  <TimeField granularity="hour">
    <Label>Stunde</Label>
  </TimeField>
  <TimeField>
    <Label>Stunde und Minute</Label>
  </TimeField>
  <TimeField granularity="second">
    <Label>Stunde, Minute und Sekunde</Label>
  </TimeField>
</Row>

Disabled

Datum (optional)
––
––
import Label from "@mittwald/flow-react-components/Label";
import TimeField from "@mittwald/flow-react-components/TimeField";

<TimeField isDisabled>
  <Label>Datum</Label>
</TimeField>
Feedback geben