The Date Range Picker includes a text input and a calendar pop-up, allowing users to easily select start and end dates.
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 (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.

Properties

Section titled "Properties"

customRanges

Section titled "customRanges"

Renders chips with custom ranges based on the elements of the array.

 
customRanges: CustomDateRange[] = []

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

disabled

Section titled "disabled"

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

The disabled state of the component.

 
disabled: boolean

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

disabledDates

Section titled "disabledDates"

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

Gets/sets disabled dates.

 
disabledDates: DateRangeDescriptor[] = []

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

headerOrientation

Section titled "headerOrientation"

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

The orientation of the calendar header.

 
headerOrientation: CalendarHeaderOrientation = 'horizontal'

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

hideHeader

Section titled "hideHeader"

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

Determines whether the calendar hides its header.

 
hideHeader: boolean = false

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

hideOutsideDays

Section titled "hideOutsideDays"

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

Controls the visibility of the dates that do not belong to the current month.

 
hideOutsideDays: boolean = false

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

invalid

Section titled "invalid"

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

Sets the control into invalid state (visual state only).

 
invalid: boolean

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

keepOpenOnOutsideClick

Section titled "keepOpenOnOutsideClick"

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

Keeps the dropdown of the component open when the user clicks outside of it.

 
keepOpenOnOutsideClick: boolean = false

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

keepOpenOnSelect

Section titled "keepOpenOnSelect"

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

Keeps the dropdown of the component open after the user selects an item.

 
keepOpenOnSelect: boolean = false

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

label

Section titled "label"

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

The label of the picker.

 
label: string

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

labelEnd

Section titled "labelEnd"

The label of the end input.

 
labelEnd: string = ''

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

labelStart

Section titled "labelStart"

The label of the start input.

 
labelStart: string = ''

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

mode

Section titled "mode"

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

Determines whether the calendar is opened in a dropdown or a modal dialog.

 
mode: PickerMode = 'dropdown'

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

name

Section titled "name"

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

The name of the control, submitted with the form data.

 
name: string

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

nonEditable

Section titled "nonEditable"

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

Whether to allow typing in the input.

 
nonEditable: boolean = false

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

open

Section titled "open"

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

Sets the open state of the component.

 
open: boolean = false

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

orientation

Section titled "orientation"

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

The orientation of the multiple months displayed in the calendar's days view.

 
orientation: ContentOrientation = 'horizontal'

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

outlined

Section titled "outlined"

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

Whether the control will have outlined appearance.

 
outlined: boolean = false

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

placeholderEnd

Section titled "placeholderEnd"

The placeholder text of the end input.

 
placeholderEnd: string = ''

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

placeholderStart

Section titled "placeholderStart"

The placeholder text of the start input.

 
placeholderStart: string = ''

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

prompt

Section titled "prompt"

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

The prompt symbol to use for unfilled parts of the mask.

 
prompt: string = '_'

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

readOnly

Section titled "readOnly"

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

Makes the control a readonly field.

 
readOnly: boolean = false

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

scrollStrategy

Section titled "scrollStrategy"

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

Sets the behavior of the component when the parent container scrolls.

If the value is hide, the component hides while the anchor is fully out of view. hide is the default value.

If the value is scroll, the component stays visible and anchored.

If the value is close, the component closes on each scroll.

 
scrollStrategy: PopoverScrollStrategy = 'hide'

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

showWeekNumbers

Section titled "showWeekNumbers"

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

Whether to show the number of the week in the calendar.

 
showWeekNumbers: boolean = false

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

specialDates

Section titled "specialDates"

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

Gets/sets special dates.

 
specialDates: DateRangeDescriptor[]

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

usePredefinedRanges

Section titled "usePredefinedRanges"

Whether the control will show chips with predefined ranges.

 
usePredefinedRanges: boolean = false

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

useTwoInputs

Section titled "useTwoInputs"

Use two inputs to display the date range values. Makes the input editable in dropdown mode.

 
useTwoInputs: boolean = false

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

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

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

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

Accessors

Section titled "Accessors"

activeDate

Section titled "activeDate"

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

get activeDate(): any

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

Gets/Sets the date which is shown in the calendar picker and is highlighted. By default it is the current date.

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

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

Parameters

  • value: string | Date | null | undefined

Returns void

defaultValue

Section titled "defaultValue"

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

get defaultValue(): any

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

The initial value of the component.

 
set defaultValue(value: unknown): void

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

Parameters

  • value: unknown

Returns void

displayFormat

Section titled "displayFormat"

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

get displayFormat(): any

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

Format to display the value in when not editing. Defaults to the locale format if not set.

 
set displayFormat(value: string): void

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

Parameters

  • value: string

Returns void

form

Section titled "form"

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

Returns the HTMLFormElement associated with this element.

 
get form(): HTMLFormElement | null

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

Returns HTMLFormElement | null

inputFormat

Section titled "inputFormat"

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

get inputFormat(): any

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

The date format to apply on the input. Defaults to the current locale Intl.DateTimeFormat

 
set inputFormat(value: string): void

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

Parameters

  • value: string

Returns void

locale

Section titled "locale"

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

The locale used to format the display value and to resolve the component's resource strings. Falls back to the global locale when not set.

 
set locale(value: string): void

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

Parameters

  • value: string

Returns void

max

Section titled "max"

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

The maximum value required for the picker to remain valid.

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

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

Parameters

  • value: string | Date | null | undefined

Returns void

min

Section titled "min"

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

The minimum value required for the picker to remain valid.

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

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

Parameters

  • value: string | Date | null | undefined

Returns void

placeholder

Section titled "placeholder"

The placeholder text of the control (single input).

 
set placeholder(value: string): void

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

Parameters

  • value: string

Returns void

required

Section titled "required"

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

get required(): any

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

When set, makes the component a required field for validation.

 
set required(value: boolean): void

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

Parameters

  • value: boolean

Returns void

resourceStrings

Section titled "resourceStrings" 
get resourceStrings(): any

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

The resource strings of the date range picker.

 
set resourceStrings(value: DateRangeResourceStrings): void

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

Parameters

  • value: DateRangeResourceStrings

Returns void

validationMessage

Section titled "validationMessage"

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

A string containing the validation message of this element.

 
get validationMessage(): string

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

Returns string

validity

Section titled "validity"

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

Returns a ValidityState object for the element.

 
get validity(): ValidityState

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

Returns ValidityState

value

Section titled "value"

The value of the picker

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

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

Parameters

  • value: string | DateRangeValue | null | undefined

Returns void

visibleMonths

Section titled "visibleMonths"

The number of months displayed in the calendar.

 
get visibleMonths(): number

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

Returns number

The number of months displayed in the calendar.

 
set visibleMonths(value: number): void

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

Parameters

  • value: number

Returns void

weekStart

Section titled "weekStart"

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

get weekStart(): any

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

Sets the start day of the week for the calendar.

 
set weekStart(value: WeekDays | undefined): void

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

Parameters

  • value: WeekDays | undefined

Returns void

willValidate

Section titled "willValidate"

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

Returns true when the element is a candidate for constraint validation.

 
get willValidate(): boolean

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

Returns boolean

Methods

Section titled "Methods"

checkValidity

Section titled "checkValidity"

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

Checks validity and emits invalid when the control is invalid.

 
checkValidity(): boolean

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

Returns boolean

clear

Section titled "clear"

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

Clears the editor(s) of the picker of any user input.

 
clear(): void

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

Returns void

hasDateParts

Section titled "hasDateParts" 
hasDateParts(): boolean

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

Returns boolean

hasTimeParts

Section titled "hasTimeParts" 
hasTimeParts(): boolean

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

Returns boolean

hide

Section titled "hide"

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

Hides the component.

 
hide(): Promise<boolean>

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

Returns Promise<boolean>

reportValidity

Section titled "reportValidity"

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

Checks validity and shows the browser message when invalid.

 
reportValidity(): boolean

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

Returns boolean

select

Section titled "select"

Selects a date range value in the picker

 
select(value: DateRangeValue | null): void

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

Parameters

  • value: DateRangeValue | null

Returns void

setCustomValidity

Section titled "setCustomValidity"

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

Sets a custom message. Invalid while message is not empty.

 
setCustomValidity(message: string): void

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

Parameters

  • message: string

Returns void

show

Section titled "show"

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

Shows the component.

 
show(): Promise<boolean>

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

Returns Promise<boolean>

toggle

Section titled "toggle"

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

Toggles the open state of the component.

 
toggle(): Promise<boolean>

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

Returns Promise<boolean>