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> & IgcMaskInputBaseComponent<
this,
>
- IgcDateTimeInputComponent

Other

disabled

disabled: boolean

The disabled state of the component.

Attr

Default

false

displayFormat

displayFormat: string

Format to display the value in when not editing. Defaults to the input format if not set.

Attr

display-format

invalid

invalid: boolean

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

Attr

Default

false

label

label: string

The label for the control.

Attr

locale

locale: string = 'en'

The locale settings used to display the value.

Attr

name

name: string

The name attribute of the control.

Attr

outlined

outlined: boolean = false

Whether the control will have outlined appearance.

Attr

placeholder

placeholder: string

The placeholder attribute of the control.

Attr

readOnly

readOnly: boolean = false

Makes the control a readonly field.

Attr

readonly

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'

Returns the HTML-uppercased qualified name.

MDN Reference

defaultValue

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

Parameters
- value: unknown
Returns void

form

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

Returns null | HTMLFormElement

inputFormat

get inputFormat(): string
- Defined in src/components/date-time-input/date-time-input.ts:111
The date format to apply on the input.

Attr
input-format

Returns string

mask

set mask(value: string): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).mask
- Defined in src/components/mask-input/mask-input-base.ts:45
The masked pattern of the component.
Attr
Default
```
'CCCCCCCCCC'
```
Parameters
- value: string
Returns void

max

set max(value: undefined | null | string | Date): void
- Defined in src/components/date-time-input/date-time-input.ts:159
The maximum value required for the input to remain valid.

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

min

set min(value: undefined | null | string | Date): void
- Defined in src/components/date-time-input/date-time-input.ts:145
The minimum value required for the input to remain valid.

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

prompt

set prompt(value: string): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).prompt
- Defined in src/components/mask-input/mask-input-base.ts:60
The prompt symbol to use for unfilled parts of the mask pattern.
Attr
Default
```
'_'
```
Parameters
- value: string
Returns void

required

set required(value: boolean): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).required
- Defined in src/components/common/mixins/forms/types.ts:174
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<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).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<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).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

get value(): null | Date
Overrides EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).value
- Defined in src/components/date-time-input/date-time-input.ts:125
The value attribute of the control.

Returns null | Date
set value(value: undefined | null | string | Date): void
Overrides EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).value
- Defined in src/components/date-time-input/date-time-input.ts:135
The value of the input.

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

willValidate

get willValidate(): boolean
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).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

blur

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

Returns void

checkValidity

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

Returns boolean

clear

clear(): void
- Defined in src/components/date-time-input/date-time-input.ts:322
Clears the input element of user input.

Returns void

focus

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

Parameters
- options: FocusOptions
Returns void

reportValidity

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

Returns boolean

select

select(): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).select
- Defined in src/components/mask-input/mask-input-base.ts:158
Selects all text within the input.

Returns void

setCustomValidity

setCustomValidity(message: string): void
Inherited from EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).setCustomValidity
- Defined in src/components/common/mixins/forms/types.ts:149
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<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).setRangeText
- Defined in src/components/mask-input/mask-input-base.ts:174
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<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).setSelectionRange
- Defined in src/components/mask-input/mask-input-base.ts:163
Sets the text selection range of the control

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

stepDown

stepDown(datePart?: DatePart, delta?: number): void
- Defined in src/components/date-time-input/date-time-input.ts:308
Decrements a date/time portion.

Parameters
- datePart: DatePart
- delta: number
Returns void

stepUp

stepUp(datePart?: DatePart, delta?: number): void
- Defined in src/components/date-time-input/date-time-input.ts:294
Increments a date/time portion.

Parameters
- datePart: DatePart
- delta: number
Returns void

lifecycle

connectedCallback

connectedCallback(): void
Overrides EventEmitterMixin< IgcDateTimeInputComponentEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).connectedCallback
- Defined in src/components/date-time-input/date-time-input.ts:284
Invoked when the component is added to the document's DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.
```
connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}
```
Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().
Returns void

Class IgcDateTimeInputComponent

Element

Slot

Slot

Slot

Slot

Slot

Slot

Slot

Slot

Fires

Fires

Csspart

Csspart

Csspart

Csspart

Csspart

Csspart

Hierarchy

Hierarchy

Other

lifecycle

Other

disabled

Attr

Default

displayFormat

Attr

invalid

Attr

Default

label

Attr

locale

Attr

name

Attr

outlined

Attr

placeholder

Attr

readOnly

Attr

spinDelta

spinLoop

Attr

Static ReadonlytagName

defaultValue

Parameters

value: unknown

Returns void

form

Returns null | HTMLFormElement

inputFormat

Attr

Returns string

mask

Attr

Default

Parameters

value: string

Returns void

max

Attr

Parameters

value: undefined | null | string | Date

Returns void

min

Attr

Parameters

value: undefined | null | string | Date

Returns void

prompt

Attr

Default

Parameters

value: string

Returns void

required

Attr

`Static` `Readonly`tagName