Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

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

Hierarchy

  • EventEmitterInterface<IgcDateTimeInputComponentEventMap, this> & IgcMaskInputBaseComponent<this>
    • IgcDateTimeInputComponent

Properties

Accessors

Methods

Properties

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

max

max: Date

The maximum value required for the input to remain valid.

Attr

min

min: Date

The minimum value required for the input to remain valid.

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

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

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 ReadonlytagName

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

Returns the HTML-uppercased qualified name.

MDN Reference

Accessors

form

  • get form(): null | HTMLFormElement

  • Returns the HTMLFormElement associated with this element.

    Returns null | HTMLFormElement

inputFormat

required

  • set required(value): void

  • When set, makes the component a required field for validation.

    Attr

    Default

    false

    Parameters

    • value: boolean

    Returns void

validationMessage

  • get validationMessage(): string

  • A string containing the validation message of this element.

    Returns string

validity

  • get validity(): ValidityState

  • 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

  • The value attribute of the control.

    Returns null | Date

  • set value(val): void

  • The value of the input.

    Attr

    Parameters

    • val: null | Date

    Returns void

willValidate

  • get willValidate(): boolean

  • 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

  • Removes focus from the control.

    Returns void

checkValidity

  • checkValidity(): boolean

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

    Returns boolean

clear

focus

  • focus(options?): void

  • Sets focus on the control.

    Parameters

    • options: FocusOptions

    Returns void

reportValidity

  • reportValidity(): boolean

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

    Returns boolean

select

  • select(): void

  • Selects all text within the input.

    Returns void

setCustomValidity

  • setCustomValidity(message): 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

setRangeText

  • setRangeText(replacement, start?, end?, selectMode?): void

  • 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, end, direction?): void

  • Sets the text selection range of the control

    Parameters

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

    Returns void

stepDown

stepUp