A date time input is an input field that lets you set and edit the date and time in a chosen input element using customizable display and input formats.

prefix - Renders content before the input.

suffix - Renders content after input.

helper-text - Renders content below the input.

value-missing - Renders content when the required validation fails.

range-overflow - Renders content when the max validation fails.

range-underflow - Renders content when the min validation fails.

custom-error - Renders content when setCustomValidity(message) is set.

invalid - Renders content when the component is in invalid state (validity.valid = false).

container - The main wrapper that holds all main input elements.

input - The native input element.

label - The native label element.

prefix - The prefix wrapper.

suffix - The suffix wrapper.

helper-text - The helper text wrapper.

Callable

  • Returns ReactNode

Events

onChange: (args: CustomEvent<Date>) => void

Emitted when the control's checked state changes.

Type declaration

onInput: (args: CustomEvent<string>) => void

Emitted when the control input receives user input.

Type declaration

Methods

  • Clears the input element of user input.

    Returns void

  • Returns void

  • Decrements a date/time portion.

    Parameters

    Returns void

  • Increments a date/time portion.

    Parameters

    Returns void

Properties

displayFormat: string

Format to display the value in when not editing. Defaults to the input format if not set.

inputFormat: string

The date format to apply on the input.

locale: string

The locale settings used to display the value.

max: Date

The maximum value required for the input to remain valid.

min: Date

The minimum value required for the input to remain valid.

spinDelta: DatePartDeltas

Delta values used to increment or decrement each date part on step actions. All values default to 1.

spinLoop: boolean

Sets whether to loop over the currently spun segment.

value: Date