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)
import {
  DatePicker,
  Label,
} from "@mittwald/flow-react-components";
import {
  getLocalTimeZone,
  today,
} from "@internationalized/date";

<DatePicker minValue={today(getLocalTimeZone())}>
  <Label>Datum</Label>
</DatePicker>

Verfügbare Daten

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

DatumEs kann nur der 1. jeden Monats ausgewählt werden
import {
  DatePicker,
  FieldDescription,
  Label,
} from "@mittwald/flow-react-components";
import { type DateValue } from "@internationalized/date";

<DatePicker
  isRequired
  isDateUnavailable={(date: DateValue) => date.day !== 1}
>
  <Label>Datum</Label>
  <FieldDescription>
    Es kann nur der 1. jeden Monats ausgewählt werden
  </FieldDescription>
</DatePicker>

Disabled

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

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

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

Mit FieldDescription

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

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

<DatePicker>
  <Label>Datum</Label>
  <FieldDescription>Weitere Informationen</FieldDescription>
</DatePicker>

Kombiniere mit ...

ContextualHelp

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

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

<DatePicker>
  <Label>
    Datum
    <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>
</DatePicker>

React Hook Form

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

Datum
import {
  Button,
  DatePicker,
  Label,
  Section,
} 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 { CalendarDate } from "@internationalized/date";

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

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="date"
          rules={{
            required: "Bitte wähle ein Datum aus",
          }}
        >
          <DatePicker>
            <Label>Datum</Label>
          </DatePicker>
        </Field>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

Overview