Class IgcDateTimeInputComponent

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

Slot

prefix - Renders content before the input.

Slot

suffix - Renders content after input.

Slot

helper-text - Renders content below the input.

Slot

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

Slot

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

Slot

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

Slot

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

Slot

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

Fires

igcInput - Emitted when the control input receives user input.

Fires

igcChange - Emitted when the control's checked state changes.

Csspart

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

Csspart

input - The native input element.

Csspart

label - The native label element.

Csspart

prefix - The prefix wrapper.

Csspart

suffix - The suffix wrapper.

Csspart

helper-text - The helper text wrapper.

Hierarchy

EventEmitterInterface<IgcDateTimeInputComponentEventMap, this> & IgcDateTimeInputBaseComponent<
this,
>
- IgcDateTimeInputComponent

Properties

disabled

disabled: boolean

The disabled state of the component.

Attr

Default

false

invalid

invalid: boolean

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

Attr

Default

false

label

label: string

The label for the control.

Attr

name

name: string

The name attribute of the control.

Attr

outlined

outlined: boolean = false

Whether the control will have outlined appearance.

Attr

Default

false

placeholder

placeholder: string

The placeholder attribute of the control.

Attr

readOnly

readOnly: boolean

Makes the control a readonly field.

Attr

readonly

Default

false

`Optional`spinDelta

spinDelta?: DatePartDeltas

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

spinLoop

spinLoop: boolean = true

Sets whether to loop over the currently spun segment.

Attr

spin-loop

`Static` `Readonly`tagName

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

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

MDN Reference

Accessors

defaultValue

set defaultValue(value: unknown): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).defaultValue
- Defined in src/components/common/mixins/forms/types.ts:162
The initial value of the component.

Parameters
- value: unknown
Returns void

displayFormat

set displayFormat(value: string): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).displayFormat
- Defined in src/components/date-time-input/date-time-input.base.ts:168
Format to display the value in when not editing. Defaults to the locale format if not set.

Attr
display-format

Parameters
- value: string
Returns void

form

get form(): HTMLFormElement | null
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).form
- Defined in src/components/common/mixins/forms/types.ts:45
Returns the HTMLFormElement associated with this element.

Returns HTMLFormElement | null

inputFormat

get inputFormat(): string
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).inputFormat
- Defined in src/components/date-time-input/date-time-input.base.ts:122
The date format to apply on the input.

Attr
input-format

Returns string

locale

set locale(value: string): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).locale
- Defined in src/components/date-time-input/date-time-input.base.ts:197
Gets/Sets the locale used for formatting the display value.

Attr
locale

Parameters
- value: string
Returns void

mask

get mask(): string
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).mask
- Defined in src/components/common/mixins/mask-behavior.ts:59
The mask pattern of the component.

Attr
Returns string

max

set max(value: string | Date | null | undefined): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).max
- Defined in src/components/date-time-input/date-time-input.base.ts:153
The maximum value required for the input to remain valid.

Attr
Parameters
- value: string | Date | null | undefined
Returns void

min

set min(value: string | Date | null | undefined): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).min
- Defined in src/components/date-time-input/date-time-input.base.ts:139
The minimum value required for the input to remain valid.

Attr
Parameters
- value: string | Date | null | undefined
Returns void

prompt

get prompt(): string
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).prompt
- Defined in src/components/common/mixins/mask-behavior.ts:67
The prompt symbol to use for unfilled parts of the mask pattern.
Attr
Default
```
'_'
```
Returns string

required

set required(value: boolean): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).required
- Defined in src/components/common/mixins/forms/types.ts:180
When set, makes the component a required field for validation.
Attr
Default
```
false
```
Parameters
- value: boolean
Returns void

validationMessage

get validationMessage(): string
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).validationMessage
- Defined in src/components/common/mixins/forms/types.ts:54
A string containing the validation message of this element.

Returns string

validity

get validity(): ValidityState
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).validity
- Defined in src/components/common/mixins/forms/types.ts:51
Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

Returns ValidityState

value

set value(value: string | Date | null | undefined): void
- Defined in src/components/date-time-input/date-time-input.ts:110
The value of the input.

Attr
Parameters
- value: string | Date | null | undefined
Returns void

willValidate

get willValidate(): boolean
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).willValidate
- Defined in src/components/common/mixins/forms/types.ts:60
A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

Returns boolean

Methods

blur

blur(): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).blur
- Defined in src/components/date-time-input/date-time-input.base.ts:405
Removes focus from the control.

Returns void

checkValidity

checkValidity(): boolean
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).checkValidity
- Defined in src/components/common/mixins/forms/types.ts:146
Checks for validity of the control and emits the invalid event if it invalid.

Returns boolean

clear

clear(): void
Overrides EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).clear
- Defined in src/components/date-time-input/date-time-input.ts:352
Clears the input element of user input.

Returns void

focus

focus(options?: FocusOptions): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).focus
- Defined in src/components/date-time-input/date-time-input.base.ts:399
Sets focus on the control.

Parameters
- options: FocusOptions
Returns void

hasDateParts

hasDateParts(): boolean
Overrides EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).hasDateParts
- Defined in src/components/date-time-input/date-time-input.ts:362
Checks whether the current format includes date parts (day, month, year).

Returns boolean

hasTimeParts

hasTimeParts(): boolean
Overrides EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).hasTimeParts
- Defined in src/components/date-time-input/date-time-input.ts:371
Checks whether the current format includes time parts (hours, minutes, seconds).

Returns boolean

reportValidity

reportValidity(): boolean
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).reportValidity
- Defined in src/components/common/mixins/forms/types.ts:149
Checks for validity of the control and shows the browser message if it invalid.

Returns boolean

select

select(): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).select
- Defined in src/components/date-time-input/date-time-input.base.ts:393
Selects all the text inside the input.

Returns void

setCustomValidity

setCustomValidity(message: string): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).setCustomValidity
- Defined in src/components/common/mixins/forms/types.ts:155
Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

Parameters
- message: string
Returns void

setRangeText

setRangeText(
    replacement: string,
    start?: number,
    end?: number,
    selectMode?: RangeTextSelectMode,
): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).setRangeText
- Defined in src/components/common/mixins/mask-behavior.ts:94
Replaces the selected text in the control and re-applies the mask.

Parameters
- replacement: string
- start: number
- end: number
- selectMode: RangeTextSelectMode
Returns void

setSelectionRange

setSelectionRange(
    start?: number,
    end?: number,
    direction?: SelectionRangeDirection,
): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).setSelectionRange
- Defined in src/components/common/mixins/mask-behavior.ts:87
Sets the text selection range of the control.

Parameters
- start: number
- end: number
- direction: SelectionRangeDirection
Returns void

stepDown

stepDown(datePart?: DatePart, delta?: number): void
Overrides EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).stepDown
- Defined in src/components/date-time-input/date-time-input.ts:347
Decrements a date/time portion.

Parameters
- datePart: DatePart
- delta: number
Returns void

stepUp

stepUp(datePart?: DatePart, delta?: number): void
Overrides EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcDateTimeInputBaseComponent> >(IgcDateTimeInputBaseComponent).stepUp
- Defined in src/components/date-time-input/date-time-input.ts:342
Increments a date/time portion.

Parameters
- datePart: DatePart
- delta: number
Returns void

Class IgcDateTimeInputComponent

Element

Slot

Slot

Slot

Slot

Slot

Slot

Slot

Slot

Fires

Fires

Csspart

Csspart

Csspart

Csspart

Csspart

Csspart

Hierarchy

Hierarchy

Properties

Accessors

Methods

Properties

disabled

Attr

Default

invalid

Attr

Default

label

Attr

name

Attr

outlined

Attr

Default

placeholder

Attr

readOnly

Attr

Default

OptionalspinDelta

spinLoop

Attr

Static ReadonlytagName

Accessors

defaultValue

Parameters

value: unknown

Returns void

displayFormat

Attr

Parameters

value: string

Returns void

form

Returns HTMLFormElement | null

inputFormat

Attr

Returns string

locale

Attr

Parameters

value: string

Returns void

mask

Attr

Returns string

max

Attr

Parameters

value: string | Date | null | undefined

Returns void

min

Attr

Parameters

value: string | Date | null | undefined

Returns void

prompt

`Optional`spinDelta

`Static` `Readonly`tagName