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"displayFormat
Section titled "displayFormat"Format to display the value in when not editing. Defaults to the locale format if not set.
displayFormat: stringinputFormat
Section titled "inputFormat"The date format to apply on the input.
inputFormat: stringlocale
Section titled "locale"Gets/Sets the locale used for formatting the display value.
locale: stringThe maximum value required for the input to remain valid.
max: DateThe minimum value required for the input to remain valid.
min: DatespinDelta
Section titled "spinDelta"Delta values used to increment or decrement each date part on step actions.
All values default to 1.
spinDelta: DatePartDeltasspinLoop
Section titled "spinLoop"Sets whether to loop over the currently spun segment.
spinLoop: booleanvalue
Section titled "value"The value of the input.
value: DateMethods
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>): voidParameters
- args:
CustomEvent<Date>
Returns void
onInput
Section titled "onInput"Emitted when the control input receives user input.
onInput(args: CustomEvent<string>): voidParameters
- args:
CustomEvent<string>