DatePicker

Der DatePicker ermöglicht die Eingabe eines Datums per Tastatur oder die Auswahl über einen visuellen Kalender.

GitHub Markdown

Grundlagen

Best Practices

Achte bei der Verwendung eines DatePickers darauf, dass ...

ein verständliches Label wie „Datum“ verwendet wird.
das Datumsformat dem gewohnten Format des Users und dem Nutzungskontext entspricht.
sinnvolle Defaultwerte gewählt werden.
Eingaben ggf. mit minValue und maxValue eingeschränkt werden – z. B., um das frühestmögliche Datum eines Termins anzuzeigen.

Verwendung

Verwende einen DatePicker, um ...

dem User die Auswahl eines konkreten Datums zu ermöglichen – etwa für einen Termin.
einen Datensatz auf ein bestimmtes Datum zu begrenzen, z. B. bei der Darstellung von Diagrammen.

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.

mmddyyyy

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.

mmddyyyy

Datum(optional)

Verfügbare Daten

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

mmddyyyy

DatumEs kann nur der 1. jeden Monats ausgewählt werden

Disabled

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

mmddyyyy

Datum(optional)

Mit FieldDescription

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

mmddyyyy

Datum(optional)Weitere Informationen

Kombiniere mit ...

ContextualHelp

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

mmddyyyy

Datum(optional)

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form).

Properties

Property	Type	Default	Description
`className`	`ClassNameOrFunction<DateRangePickerRenderProps>`	'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<TooltipRenderProps>`	-	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 `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`dir`	`string`	-
`lang`	`string`	-
`hidden`	`boolean`	-
`inert`	`boolean`	-
`translate`	`"yes" \| "no"`	-
`validationBehavior`	`"native" \| "aria"`	'native'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
`hourCycle`	`12 \| 24`	-	Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
`granularity`	`"hour" \| "minute" \| "second"`	'minute'	Determines the smallest unit that is displayed in the time picker.
`hideTimeZone`	`boolean`	-	Whether to hide the time zone abbreviation.
`shouldForceLeadingZeros`	`boolean`	-	Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
`placeholderValue`	`TimeValue`	-	A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults to 12:00 AM or 00:00 depending on the hour cycle.
`minValue`	`TimeValue`	-	The minimum allowed time that a user may select.
`maxValue`	`TimeValue`	-	The maximum allowed time that a user may select.
`isDisabled`	`boolean`	-	Whether the input is disabled.
`isReadOnly`	`boolean`	-	Whether the input can be selected but not changed by the user.
`isRequired`	`boolean`	-	Whether user input is required on the input before form submission.
`isInvalid`	`boolean`	-	Whether the input value is invalid.
`validate`	`((value: TimeValue) => true \| ValidationError)`	-	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
`autoFocus`	`boolean`	-	Whether the element should receive focus on render.
`value`	`TimeValue`	-	The current value (controlled).
`defaultValue`	`TimeValue`	-	The default value (uncontrolled).
`id`	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`name`	`string`	-	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
`form`	`string`	-	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
`slot`	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`autoComplete`	`string`	-	Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
`shouldCloseOnSelect`	`boolean \| (() => boolean)`	true	Determines whether the date picker popover should close automatically when a date is selected.
`isDateUnavailable`	`((date: DateValue, anchorDate: CalendarDate) => boolean)`	-	Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
`pageBehavior`	`PageBehavior`	visible	Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
`firstDayOfWeek`	`"sun" \| "mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat"`	-	The day that starts the week.
`children`	`ReactNode`	-
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`ref`	`Ref<HTMLSpanElement>`	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	`Key`	-

Events

Property	Type	Default	Description
`onOpenChange`	`((isOpen: boolean) => void)`	-	Handler that is called when the overlay's open state changes.
`onClick`	`MouseEventHandler<HTMLDivElement>`	-
`onClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClick`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDown`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onTouchCancel`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture`	`UIEventHandler<HTMLDivElement>`	-
`onWheel`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onTransitionCancel`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onFocus`	`((e: FocusEvent<Element, Element>) => void)`	-	Handler that is called when the element receives focus.
`onBlur`	`((e: FocusEvent<Element, Element>) => void)`	-	Handler that is called when the element loses focus.
`onFocusChange`	`((isFocused: boolean) => void)`	-	Handler that is called when the element's focus status changes.
`onKeyDown`	`((e: KeyboardEvent) => void)`	-	Handler that is called when a key is pressed.
`onKeyUp`	`((e: KeyboardEvent) => void)`	-	Handler that is called when a key is released.
`onChange`	`((value: TimeValue) => void)`	-	Handler that is called when the value changes.

Accessibility

Property	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.

DatePicker

Grundlagen

Best Practices

Verwendung

Playground

Min- und Max-Values

Verfügbare Daten

Disabled

Mit FieldDescription

Kombiniere mit ...

ContextualHelp

React Hook Form

Properties

Events

Accessibility

Auf dieser Seite