Slots

prefix — Renders content before the input (single input).

prefix-start — Renders content before the start input (two inputs).

prefix-end — Renders content before the end input (two inputs).

suffix — Renders content after the input (single input).

suffix-start — Renders content after the start input (two inputs).

suffix-end — Renders content after the end input (two inputs).

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.

clear-icon-start — Renders a clear icon template for the start input (two inputs).

clear-icon-end — Renders a clear icon template for the end input (two inputs).

calendar-icon — Renders the icon/content for the calendar picker.

calendar-icon-start — Renders the icon/content for the calendar picker for the start input (two inputs).

calendar-icon-end — Renders the icon/content for the calendar picker for the end input (two inputs).

calendar-icon-open — Renders the icon/content for the picker in open state.

calendar-icon-open-start — Renders the icon/content for the picker in open state for the start input (two inputs).

calendar-icon-open-end — Renders the icon/content for the picker in open state for the end input (two inputs).

actions — Renders content in the action part of the picker in open state.

separator — Renders the separator element between the two inputs.

CSS Parts

separator — The separator element between the two inputs.

ranges — The wrapper that renders the custom and predefined ranges.

label — The label wrapper that renders content above the target input.

calendar-icon — The calendar icon wrapper for closed state (single input).

calendar-icon-start — The calendar icon wrapper for closed state for the start input (two inputs).

calendar-icon-end — The calendar icon wrapper for closed state for the end input (two inputs).

calendar-icon-open — The calendar icon wrapper for opened state (single input).

calendar-icon-open-start — The calendar icon wrapper for opened state for the start input (two inputs).

calendar-icon-open-end — The calendar icon wrapper for opened state for the end input (two inputs).

clear-icon — The clear icon wrapper (single input).

clear-icon-start — The clear icon wrapper for the start input (two inputs).

clear-icon-end — The clear icon wrapper for the end input (two inputs).

actions — The wrapper for the custom actions area.

input — The native input element.

prefix — The prefix wrapper.

suffix — The suffix 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.

customRanges: CustomDateRange[]

labelEnd: string

labelStart: string

placeholder: string

placeholderEnd: string

placeholderStart: string

resourceStrings: IgrDateRangePickerResourceStrings & IDateRangePickerResourceStrings & ICalendarResourceStrings

usePredefinedRanges: boolean

useTwoInputs: boolean

value: DateRangeValue | null

visibleMonths: number

select(value: DateRangeValue | null): void

Parameters

• value: DateRangeValue | null

Returns void

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

Parameters

• args: CustomEvent<DateRangeValue | 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<DateRangeValue | null>): void

Parameters

• args: CustomEvent<DateRangeValue | 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