Element

igc-date-range-picker

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 (single input).

suffix-end — Renders content after the end input (single 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.

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.

clear-icon — The clear icon wrapper.

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[] = []

disabled: boolean

disabledDates: DateRangeDescriptor[] = []

headerOrientation: CalendarHeaderOrientation = 'horizontal'

hideHeader: boolean = false

hideOutsideDays: boolean = false

invalid: boolean

keepOpenOnOutsideClick: boolean = false

keepOpenOnSelect: boolean = false

label: string

labelEnd: string = ''

labelStart: string = ''

mode: PickerMode = 'dropdown'

name: string

nonEditable: boolean = false

open: boolean = false

orientation: ContentOrientation = 'horizontal'

outlined: boolean = false

placeholderEnd: string = ''

placeholderStart: string = ''

prompt: string = '_'

readOnly: boolean = false

showWeekNumbers: boolean = false

specialDates: DateRangeDescriptor[]

usePredefinedRanges: boolean = false

useTwoInputs: boolean = false

weekStart: WeekDays = 'sunday'

tagName: "igc-date-range-picker" = 'igc-date-range-picker'

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get activeDate(): any

set activeDate(value: string | Date | null | undefined): void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get defaultValue(): any

set defaultValue(value: unknown): void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get displayFormat(): any

set displayFormat(value: string): void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get form(): HTMLFormElement | null

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get inputFormat(): any

set inputFormat(value: string): void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get locale(): any

set locale(value: string): void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get max(): any

set max(value: string | Date | null | undefined): void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get min(): any

set min(value: string | Date | null | undefined): void

get placeholder(): any

set placeholder(value: string): void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get required(): any

set required(value: boolean): void

get resourceStrings(): any

set resourceStrings(value: IgcDateRangePickerResourceStrings | DateRangePickerResourceStringsType): void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get validationMessage(): string

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get validity(): ValidityState

get value(): any

set value(value: string | DateRangeValue | null | undefined): void

get visibleMonths(): number

set visibleMonths(value: number): void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

get willValidate(): boolean

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

checkValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:166

Returns boolean

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

clear(): void

Defined in src/components/date-picker/date-picker.base.ts:577

Returns void

hasDateParts(): boolean

Defined in src/components/date-range-picker/date-range-picker.ts:530

Returns boolean

hasTimeParts(): boolean

Defined in src/components/date-range-picker/date-range-picker.ts:536

Returns boolean

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

hide(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:53

Returns Promise<boolean>

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

reportValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:169

Returns boolean

select(value: DateRangeValue | null): void

Defined in src/components/date-range-picker/date-range-picker.ts:541

Parameters

• value: DateRangeValue | null

Returns void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

setCustomValidity(message: string): void

Defined in src/internals/mixins/forms/types.ts:175

Parameters

• message: string

Returns void

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

show(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:48

Returns Promise<boolean>

Inherited from: EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<DateRangeValue>> >(IgcDatePickerBaseComponent)

toggle(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:58

Returns Promise<boolean>