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.

IgcDateRangePickerComponent

new IgcDateRangePickerComponent(): IgcDateRangePickerComponent

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

Returns IgcDateRangePickerComponent

customRanges: CustomDateRange[] = []

disabled: boolean

emitEvent: object & object

headerOrientation: ContentOrientation = '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'

styles: CSSResult[]

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

get activeDate(): Date

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

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

get defaultValue(): unknown

set defaultValue(value: unknown): void

get disabledDates(): DateRangeDescriptor[]

set disabledDates(dates: DateRangeDescriptor[]): void

get displayFormat(): string

set displayFormat(value: string): void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

get form(): HTMLFormElement | null

get inputFormat(): string

set inputFormat(value: string): void

get locale(): string

set locale(value: string): void

get max(): Date | null

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

get min(): Date | null

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

get placeholder(): string

set placeholder(value: string): void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

get required(): boolean

set required(value: boolean): void

get resourceStrings(): IgcDateRangePickerResourceStrings & IDateRangePickerResourceStrings & ICalendarResourceStrings

set resourceStrings(value: IgcDateRangePickerResourceStrings | DateRangePickerResourceStringsType): void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

get validationMessage(): string

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

get validity(): ValidityState

get value(): DateRangeValue | null

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

get visibleMonths(): number

set visibleMonths(value: number): void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

get willValidate(): boolean

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

• type: K
• listener: object
• options: boolean | AddEventListenerOptions

Returns void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

checkValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:146

Returns boolean

clear(): void

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

Returns void

hasDateParts(): boolean

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

Returns boolean

hasTimeParts(): boolean

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

Returns boolean

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

hide(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:90

Returns Promise<boolean>

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

• type: K
• listener: object
• options: boolean | EventListenerOptions

Returns void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

reportValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:149

Returns boolean

select(value: DateRangeValue | null): void

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

Parameters

• value: DateRangeValue | null

Returns void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

setCustomValidity(message: string): void

Defined in src/components/common/mixins/forms/types.ts:155

Parameters

• message: string

Returns void

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

show(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:85

Returns Promise<boolean>

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDateRangePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

toggle(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:95

Returns Promise<boolean>

register(): void

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

Returns void

igcChange: CustomEvent<DateRangeValue | null>

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

igcClosed: CustomEvent<void>

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

igcClosing: CustomEvent<void>

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

igcInput: CustomEvent<DateRangeValue | null>

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

igcOpened: CustomEvent<void>

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

igcOpening: CustomEvent<void>

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