TimeField

Mit dem TimeField können User eine konkrete Uhrzeit angeben.GitHub Markdown

Properties

Property	Type	Description
`id`	`string`	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`translate`	`yesno`
`className`	`ClassNameOrFunction<DateFieldRenderProps>`Default: 'react-aria-TimeField'	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.
`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`
`validationBehavior`	`nativearia`Default: '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`	`1224`	Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
`granularity`	`hourminutesecond`Default: '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) => trueValidationError)`	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).
`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.
`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	Description
`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	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.

TimeField

Properties

Events

Accessibility

Auf dieser Seite