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.
Slots
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).
CSS Parts
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.

Properties

Section titled "Properties"

value

Section titled "value"

The value of the input.

Only ever holds a committed value. While the user is typing, the intermediate state lives in the masked text and is committed - together with an igcChange event - when the edit is committed on blur. Use the igcInput event to observe the value as it is being typed.

 
value: Date | null

Methods

Section titled "Methods"

stepDown

Section titled "stepDown"

Decrements a date/time portion.

 
stepDown(datePart: DatePart, delta: number): void

Parameters

Returns void

stepUp

Section titled "stepUp"

Increments a date/time portion.

 
stepUp(datePart: DatePart, delta: number): void

Parameters

Returns void

Events

Section titled "Events"

onChange

Section titled "onChange"

Emitted on blur, when the committed value differs from the one the editor was focused with..

 
onChange(args: CustomEvent<Date | null>): void

Parameters

Returns void

onInput

Section titled "onInput"

Emitted when the control input receives user input.

 
onInput(args: CustomEvent<string>): void

Parameters

Returns void