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.

activeDate: Date

disabledDates: DateRangeDescriptor[]

displayFormat: string

headerOrientation: CalendarHeaderOrientation

hideHeader: boolean

hideOutsideDays: boolean

inputFormat: string

label: string

locale: string

max: Date | null

min: Date | null

mode: PickerMode

nonEditable: boolean

open: boolean

orientation: ContentOrientation

outlined: boolean

placeholder: string

prompt: string

readOnly: boolean

resourceStrings: IgrCalendarResourceStrings & IDatePickerResourceStrings & ICalendarResourceStrings

showWeekNumbers: boolean

specialDates: DateRangeDescriptor[]

value: Date | null

visibleMonths: number

weekStart: WeekDays

clear(): void

Returns void

select(): void

Returns void

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

Parameters

• replacement: string
• start: number
• end: number
• mode: RangeTextSelectMode

Returns void

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

Parameters

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

Returns void

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

Parameters

• datePart: DatePart
• delta: number

Returns void

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

Parameters

• datePart: DatePart
• delta: number

Returns void

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

Parameters

• args: CustomEvent<Date | null>

Returns void

onClosed(args: CustomEvent<void>): void

Parameters

• args: CustomEvent<void>

Returns void

onClosing(args: CustomEvent<void>): void

Parameters

• args: CustomEvent<void>

Returns void

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

Parameters

• args: CustomEvent<Date | null>

Returns void

onOpened(args: CustomEvent<void>): void

Parameters

• args: CustomEvent<void>

Returns void

onOpening(args: CustomEvent<void>): void

Parameters

• args: CustomEvent<void>

Returns void