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.
Element
igc-date-time-input
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"

disabled

Section titled "disabled"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

The disabled state of the component.

 
disabled: boolean

Defined in src/components/common/mixins/forms/types.ts:29

invalid

Section titled "invalid"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Sets the control into invalid state (visual state only).

 
invalid: boolean

Defined in src/components/common/mixins/forms/types.ts:36

label

Section titled "label"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

The label for the control.

 
label: string

Defined in src/components/input/input-base.ts:70

name

Section titled "name"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

The name attribute of the control.

 
name: string

Defined in src/components/common/mixins/forms/types.ts:42

outlined

Section titled "outlined"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Whether the control will have outlined appearance.

 
outlined: boolean = false

Defined in src/components/input/input-base.ts:56

placeholder

Section titled "placeholder"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

The placeholder attribute of the control.

 
placeholder: string

Defined in src/components/input/input-base.ts:63

readOnly

Section titled "readOnly"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Makes the control a readonly field.

 
readOnly: boolean = false

Defined in src/components/mask-input/mask-input-base.ts:50

Optional spinDelta

Section titled "spinDelta"

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

 
spinDelta: DatePartDeltas

Defined in src/components/date-time-input/date-time-input.ts:241

spinLoop

Section titled "spinLoop"

Sets whether to loop over the currently spun segment.

 
spinLoop: boolean = true

Defined in src/components/date-time-input/date-time-input.ts:248

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-date-time-input" = 'igc-date-time-input'

Defined in src/components/date-time-input/date-time-input.ts:96

value

Section titled "value" 
value: Date | null

Defined in src/components/date-time-input/date-time-input.ts:183, src/components/date-time-input/date-time-input.ts:188

Accessors

Section titled "Accessors"

form

Section titled "form"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Returns the HTMLFormElement associated with this element.

get form(): HTMLFormElement | null

Defined in src/components/common/mixins/forms/types.ts:45

Returns HTMLFormElement | null

validationMessage

Section titled "validationMessage"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

A string containing the validation message of this element.

get validationMessage(): string

Defined in src/components/common/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

get validity(): ValidityState

Defined in src/components/common/mixins/forms/types.ts:51

Returns ValidityState

willValidate

Section titled "willValidate"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

get willValidate(): boolean

Defined in src/components/common/mixins/forms/types.ts:60

Returns boolean

Methods

Section titled "Methods"

blur

Section titled "blur"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Removes focus from the control.

blur(): void

Defined in src/components/input/input-base.ts:102

Returns void

checkValidity

Section titled "checkValidity"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Checks for validity of the control and emits the invalid event if it invalid.

checkValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:140

Returns boolean

clear

Section titled "clear"

Clears the input element of user input.

clear(): void

Defined in src/components/date-time-input/date-time-input.ts:670

Returns void

focus

Section titled "focus"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Sets focus on the control.

focus(options: FocusOptions): void

Defined in src/components/input/input-base.ts:96

Parameters

  • options: FocusOptions

Returns void

hasDateParts

Section titled "hasDateParts"

Checks whether the current format includes date parts (day, month, year).

hasDateParts(): boolean

Defined in src/components/date-time-input/date-time-input.ts:680

Returns boolean

hasTimeParts

Section titled "hasTimeParts"

Checks whether the current format includes time parts (hours, minutes, seconds).

hasTimeParts(): boolean

Defined in src/components/date-time-input/date-time-input.ts:689

Returns boolean

reportValidity

Section titled "reportValidity"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Checks for validity of the control and shows the browser message if it invalid.

reportValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:143

Returns boolean

select

Section titled "select"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Selects all the text inside the input.

select(): void

Defined in src/components/input/input-base.ts:90

Returns void

setCustomValidity

Section titled "setCustomValidity"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

setCustomValidity(message: string): void

Defined in src/components/common/mixins/forms/types.ts:149

Parameters

  • message: string

Returns void

setRangeText

Section titled "setRangeText"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Replaces the selected text in the control and re-applies the mask

setRangeText(replacement: string, start: number, end: number, selectMode: RangeTextSelectMode): void

Defined in src/components/mask-input/mask-input-base.ts:198

Parameters

  • replacement: string
  • start: number
  • end: number
  • selectMode: RangeTextSelectMode

Returns void

setSelectionRange

Section titled "setSelectionRange"

Inherited from: EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent)

Sets the text selection range of the control

setSelectionRange(start: number, end: number, direction: SelectionRangeDirection): void

Defined in src/components/mask-input/mask-input-base.ts:187

Parameters

  • start: number
  • end: number
  • direction: SelectionRangeDirection

Returns void

stepDown

Section titled "stepDown"

Decrements a date/time portion.

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

Defined in src/components/date-time-input/date-time-input.ts:665

Parameters

Returns void

stepUp

Section titled "stepUp"

Increments a date/time portion.

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

Defined in src/components/date-time-input/date-time-input.ts:660

Parameters

Returns void