# DateRangePicker
Der DateRangePicker erlaubt die Eingabe einer Zeitspanne per Tastatur oder die Auswahl über einen visuellen Kalender.
## Overview
# Playground
Verwende ``, um einen DateRangePicker darzustellen. Nutze ein
``, 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";
```
---
# 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";
```
---
# Disabled
Ist der DateRangePicker **disabled**, ist keine Interaktion möglich.
```tsx
import {
DateRangePicker,
Label,
} from "@mittwald/flow-react-components";
```
---
# Mit FieldDescription
Um wichtige Hinweise zum DateRangePicker bereitzustellen, kann unterhalb eine
`` eingebaut werden.
```tsx
import {
DateRangePicker,
FieldDescription,
Label,
} from "@mittwald/flow-react-components";
Weitere Informationen
```
---
# 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 (
);
}
```
---
# 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 (
);
}
```
---
# 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";
```
## 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 (
);
}
```
## Develop
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `withDatePickerPresets` | `boolean \| DateRangePresets` | - | - |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `translate` | `"yes" \| "no"` | - | - |
| `className` | `ClassNameOrFunction` | `'react-aria-DateRangePicker'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `isOpen` | `boolean` | - | Whether the overlay is open by default (controlled). |
| `defaultOpen` | `boolean` | - | Whether the overlay is open by default (uncontrolled). |
| `style` | `StyleOrFunction` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `render` | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `