The date picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up.

Slots
prefix — Renders content before the input.
suffix — Renders content after the input.
helper-text — Renders content below the input.
bad-input — Renders content when the value is in the disabledDates ranges.
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).
title — Renders content in the calendar title.
header-date — Renders content instead of the current date/range in the calendar header.
clear-icon — Renders a clear icon template.
calendar-icon — Renders the icon/content for the calendar picker.
calendar-icon-open — Renders the icon/content for the picker in open state.
actions — Renders content in the action part of the picker in open state.
CSS Parts
label — The label wrapper that renders content above the target input.
container — The main wrapper that holds all main input elements.
input — The native input element.
prefix — The prefix wrapper.
suffix — The suffix wrapper.
calendar-icon — The calendar icon wrapper for closed state.
calendar-icon-open — The calendar icon wrapper for opened state.
clear-icon — The clear icon wrapper.
actions — The actions wrapper.
helper-text — The helper-text wrapper that renders content below the target input.
header — The calendar header element.
header-title — The calendar header title element.
header-date — The calendar header date element.
calendar-content — The calendar content element which contains the views and navigation elements.
navigation — The calendar navigation container element.
months-navigation — The calendar months navigation button element.
years-navigation — The calendar years navigation button element.
years-range — The calendar years range element.
navigation-buttons — The calendar navigation buttons container.
navigation-button — The calendar previous/next navigation button.
days-view-container — The calendar days view container element.
days-view — The calendar days view element.
months-view — The calendar months view element.
years-view — The calendar years view element.
days-row — The calendar days row element.
calendar-label — The calendar week header label element.
week-number — The calendar week number element.
week-number-inner — The calendar week number inner element.
date — The calendar date element.
date-inner — The calendar date inner element.
first — The calendar first selected date element in range selection.
last — The calendar last selected date element in range selection.
inactive — The calendar inactive date element.
hidden — The calendar hidden date element.
weekend — The calendar weekend date element.
range — The calendar range selected element.
special — The calendar special date element.
disabled — The calendar disabled date element.
single — The calendar single selected date element.
preview — The calendar range selection preview date element.
month — The calendar month element.
month-inner — The calendar month inner element.
year — The calendar year element.
year-inner — The calendar year inner element.
selected — The calendar selected state for element(s). Applies to date, month and year elements.
current — The calendar current state for element(s). Applies to date, month and year elements.

The placeholder text of the control.

placeholder: string

The resource strings for localization.

resourceStrings: IgrCalendarResourceStrings & IDatePickerResourceStrings & ICalendarResourceStrings

The value of the picker.

Only ever holds a committed value. While the user is typing in the input, the intermediate state stays in the editor and is committed - together with an igcChange event - when the edit is committed on blur. Use the igcInput event to observe the value as it is being typed.

value: Date | null

Selects the text in the input of the component

select(): void

Returns void

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

Parameters

Returns void

Sets the text selection range in the input of the component

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

Parameters

Returns void

Decrements the passed in date part

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

Parameters

Returns void

Increments the passed in date part

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

Parameters

Returns void

Emitted when the user modifies and commits the elements's value.

onChange(args: CustomEvent<Date | null>): void

Parameters

Returns void

Emitted after the calendar popover is hidden.

onClosed(args: CustomEvent<void>): void

Parameters

Returns void

Emitted just before the calendar popover is hidden.

onClosing(args: CustomEvent<void>): void

Parameters

Returns void

Emitted when when the user types in the element.

onInput(args: CustomEvent<Date | null>): void

Parameters

Returns void

Emitted after the calendar popover is shown.

onOpened(args: CustomEvent<void>): void

Parameters

Returns void

Emitted just before the calendar popover is shown.

onOpening(args: CustomEvent<void>): void

Parameters

Returns void