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.

Fires

igcInput - Emitted when the control input receives user input.

Fires

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

Fires

igcFocus - Emitted when the control gains focus.

Fires

igcBlur - Emitted when the control loses focus.

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

Index

Constructors

constructor

new IgcDateTimeInputComponent(): IgcDateTimeInputComponent
Returns IgcDateTimeInputComponent
Overrides EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).constructor
- Defined in src/components/date-time-input/date-time-input.ts:299

Properties

dir

dir: Direction = 'auto'

The direction attribute of the control.

Attr

disabled

disabled: boolean = false

Makes the control a disabled field.

Attr

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 = false

Controls the validity of the control.

label

label: string

The label for the control.

Attr

locale

locale: string = 'en'

The locale settings used to display the value.

Attr

maxValue

maxValue: null | Date

The maximum value required for the input to remain valid.

Attr

max-value

minValue

minValue: null | Date

The minimum value required for the input to remain valid.

Attr

min-value

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

prompt

prompt: string

The prompt symbol to use for unfilled parts of the mask.

readonly

readonly: boolean = false

Makes the control a readonly field.

Attr

required

required: boolean = false

Makes the control a required field.

Attr

size

size: "small" | "medium" | "large"

Determines the size of the component.

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'

Accessors

inputFormat

get inputFormat(): string
The date format to apply on the input.

Attr
input-format

Returns string
- Defined in src/components/date-time-input/date-time-input.ts:75
set inputFormat(val: string): void
Parameters
- val: string
Returns void
- Defined in src/components/date-time-input/date-time-input.ts:80

value

get value(): null | Date
The value of the input.

Attr

Returns null | Date
Overrides EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).value
- Defined in src/components/date-time-input/date-time-input.ts:91
set value(val: null | Date): void
Parameters
- val: null | Date
Returns void
Overrides EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).value
- Defined in src/components/date-time-input/date-time-input.ts:103

Methods

blur

blur(): void
Removes focus from the control.

Returns void
Inherited from EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).blur
- Defined in src/components/input/input-base.ts:141

checkValidity

checkValidity(): boolean
Check for validity of the control

Returns boolean
- Defined in src/components/date-time-input/date-time-input.ts:324

clear

clear(): void
Clears the input element of user input.

Returns void
- Defined in src/components/date-time-input/date-time-input.ts:365

connectedCallback

connectedCallback(): void
Returns void
Overrides EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).connectedCallback
- Defined in src/components/date-time-input/date-time-input.ts:304

emitEvent

emitEvent<K, D>(type: K, eventInitDict?: CustomEventInit<D>): boolean
Type Parameters
- K extends keyof IgcDateTimeInputEventMap
- D extends null | string | void | Date
Parameters
- type: K
- Optional eventInitDict: CustomEventInit<D>
Returns boolean
Inherited from EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).emitEvent
- Defined in src/components/common/mixins/event-emitter.ts:30
emitEvent<K, D>(type: K, eventInitDict?: CustomEventInit<D>): boolean
Type Parameters
- K extends keyof IgcInputEventMap
- D extends string | void
Parameters
- type: K
- Optional eventInitDict: CustomEventInit<D>
Returns boolean
Inherited from EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).emitEvent
- Defined in src/components/common/mixins/event-emitter.ts:30

focus

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

reportValidity

reportValidity(): boolean
Checks for validity of the control and shows the browser message if it's invalid.

Returns boolean
- Defined in src/components/date-time-input/date-time-input.ts:314

select

select(): void
Selects all text within the input.

Returns void
Inherited from EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).select
- Defined in src/components/mask-input/mask-input-base.ts:63

setCustomValidity

setCustomValidity(message: string): void
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
Inherited from EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).setCustomValidity
- Defined in src/components/mask-input/mask-input-base.ts:57

setRangeText

setRangeText(replacement: string, start: number, end: number, selectMode?: "end" | "start" | "select" | "preserve"): void
Replaces the selected text in the input.
Parameters
- replacement: string
- start: number
- end: number
- selectMode: "end" | "start" | "select" | "preserve" = 'preserve'
Returns void
Inherited from EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).setRangeText
- Defined in src/components/input/input-base.ts:175

setSelectionRange

setSelectionRange(start: number, end: number, direction?: "none" | "forward" | "backward"): void
Parameters
- start: number
- end: number
- Optional direction: "none" | "forward" | "backward"
Returns void
Inherited from EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).setSelectionRange
- Defined in src/components/mask-input/mask-input-base.ts:145

stepDown

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

stepUp

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

themeAdopted

themeAdopted(controller: ThemeController): void
Parameters
- controller: ThemeController
Returns void
Inherited from EventEmitterMixin< IgcDateTimeInputEventMap, AbstractConstructor<IgcMaskInputBaseComponent> >(IgcMaskInputBaseComponent).themeAdopted
- Defined in src/components/input/input-base.ts:130

Class IgcDateTimeInputComponent

Element

Slot

Slot

Slot

Fires

Fires

Fires

Fires

Csspart

Csspart

Csspart

Csspart

Csspart

Csspart

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns IgcDateTimeInputComponent

Properties

dir

Attr

disabled

Attr

displayFormat

Attr

invalid

label

Attr

locale

Attr

maxValue

Attr

minValue

Attr

name

Attr

outlined

Attr

placeholder

Attr

prompt

readonly

Attr

required

Attr

size

spinDelta

spinLoop

Attr

Static Readonly tagName

Accessors

inputFormat

Attr

Returns string

Parameters

val: string

Returns void

value

Attr

Returns null | Date

Parameters

val: null | Date

Returns void

Methods

blur

Returns void

checkValidity

Returns boolean

clear

Returns void

connectedCallback

Returns void

emitEvent

Type Parameters

`Static` `Readonly` tagName

`Optional` eventInitDict: CustomEventInit<D>

`Optional` eventInitDict: CustomEventInit<D>

`Optional` options: FocusOptions

`Optional` direction: "none" | "forward" | "backward"

`Optional` datePart: DatePart

`Optional` delta: number

`Optional` datePart: DatePart

`Optional` delta: number