mittwald Flow Logo

Components

TimeField

Mit dem TimeField können User eine konkrete Uhrzeit angeben.GitHub
Uhrzeit
(optional)
––––

Playground

Verwende <TimeField />, um ein TimeField darzustellen. Die Values des TimeFields sind Objekte aus dem @internationalized/date Package.

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

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

Min- und Max-Values

Die wählbare Uhrzeit lässt sich über minValue und maxValue begrenzen.

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

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

Granularity

Mit der granularity Property wird definiert, ob Stunden, Minuten und/oder Sekunden auswählbar sind.

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

<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

Ist das TimeField disabled, ist keine Interaktion möglich.

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

<TimeField isDisabled>
  <Label>Datum</Label>
</TimeField>

Kombiniere mit ...

ContextualHelp

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

Uhrzeit
(optional)
––––
import {
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  Heading,
  Label,
  TimeField,
  Text,
} from "@mittwald/flow-react-components";

<TimeField>
  <Label>
    Uhrzeit
    <ContextualHelpTrigger>
      <Button />
      <ContextualHelp>
        <Heading>Weitere Informationen</Heading>
        <Text>
          Hier gibt es weitere Informationen, die zu lang
          für die FieldDescription sind.
        </Text>
      </ContextualHelp>
    </ContextualHelpTrigger>
  </Label>
</TimeField>

React Hook Form

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

Uhrzeit
––––
import {
  Button,
  Label,
  Section,
  TimeField,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/03-components/actions/action/examples/lib";
import type { CalendarDateTime } from "@internationalized/date";

export default () => {
  const form = useForm<{ time: CalendarDateTime }>();
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="time"
          rules={{
            required: "Bitte gib eine Uhrzeit ein",
          }}
        >
          <TimeField>
            <Label>Uhrzeit</Label>
          </TimeField>
        </Field>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

Overview