# DateRangePicker

Der DateRangePicker erlaubt die Eingabe einer Zeitspanne per Tastatur oder die Auswahl über einen visuellen Kalender.

## Overview

# 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](https://react-spectrum.adobe.com/internationalized/date/).

```tsx
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.

```tsx
import {
  DateRangePicker,
  Label,
} from "@mittwald/flow-react-components";
import {
  getLocalTimeZone,
  today,
} from "@internationalized/date";

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

---

# Disabled

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

```tsx
import {
  DateRangePicker,
  Label,
} from "@mittwald/flow-react-components";

<DateRangePicker isDisabled>
  <Label>Zeitraum</Label>
</DateRangePicker>
```

---

# Mit FieldDescription

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

```tsx
import {
  DateRangePicker,
  FieldDescription,
  Label,
} from "@mittwald/flow-react-components";

<DateRangePicker>
  <Label>Zeitraum</Label>
  <FieldDescription>Weitere Informationen</FieldDescription>
</DateRangePicker>
```

---

# Mit Presets

Mit `withDatePickerPresets` lassen sich Presets anzeigen, die eine beschleunigte
Auswahl von Datumsbereichen ermöglichen.

```tsx
import {
  DateRangePicker,
  Label,
  Section,
} from "@mittwald/flow-react-components";

export default () => {
  return (
    <Section>
      <DateRangePicker withDatePickerPresets>
        <Label>Zeitraum</Label>
      </DateRangePicker>
    </Section>
  );
}
```

---

# Mit Custom Presets

Wird `withDatePickerPresets` ein Array mit eigenen Presets übergeben, werden
diese anstelle der Default Presets verwendet.

```tsx
import {
  DateRangePicker,
  Label,
  Section,
  type DateRangePresets,
} from "@mittwald/flow-react-components";
import { CalendarDate } from "@internationalized/date";

export default () => {
  const customPresets: DateRangePresets = [
    {
      start: new CalendarDate(2050, 1, 1),
      end: new CalendarDate(2100, 1, 1),
      label: "Custom Preset",
    },
  ];

  return (
    <Section>
      <DateRangePicker
        withDatePickerPresets={customPresets}
      >
        <Label>Zeitraum</Label>
      </DateRangePicker>
    </Section>
  );
}
```

---

# Kombiniere mit ...

## ContextualHelp

Benutze das [ContextualHelp](/04-components/overlays/contextual-help/overview),
wenn zusätzliche Informationen bereitgestellt werden sollen, die zu umfangreich
für die FieldDescription sind.

```tsx
import {
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  DateRangePicker,
  Heading,
  Label,
  Text,
} from "@mittwald/flow-react-components";

<DateRangePicker>
  <Label>
    Zeitraum
    <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>
</DateRangePicker>
```

## React Hook Form

Weitere Details zur Formularlogik und -validierung sind in der Component
[Form (React Hook Form)](/04-components/react-hook-form/form/overview) zu
finden.

```tsx
import {
  DateRangePicker,
  Label,
  Section,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  SubmitButton,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import type { CalendarDate } from "@internationalized/date";
import { sleep } from "@/content/04-components/actions/action/examples/lib";

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

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="range"
          rules={{
            required: "Bitte wähle einen Zeitraum aus",
          }}
        >
          <DateRangePicker>
            <Label>Zeitraum</Label>
          </DateRangePicker>
        </Field>
        <SubmitButton>Speichern</SubmitButton>
      </Form>
    </Section>
  );
}
```