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"Methods
Section titled "Methods"clear
Section titled "clear"Clears the input element of user input.
clear(): voidReturns void
stepDown
Section titled "stepDown"Decrements a date/time portion.
stepDown(datePart: DatePart, delta: number): voidParameters
- datePart:
DatePart - delta:
number
Returns void
stepUp
Section titled "stepUp"Increments a date/time portion.
stepUp(datePart: DatePart, delta: number): voidParameters
- datePart:
DatePart - delta:
number
Returns void
Events
Section titled "Events"onChange
Section titled "onChange"Emitted when the control's checked state changes.
onChange(args: CustomEvent<Date | null>): voidParameters
- args:
CustomEvent<Date | null>
Returns void
onInput
Section titled "onInput"Emitted when the control input receives user input.
onInput(args: CustomEvent<string>): voidParameters
- args:
CustomEvent<string>