The igc-date-range-picker allows the user to select a range of dates.
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.

Properties

Section titled "Properties"

activeDate

Section titled "activeDate"

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

 
activeDate: Date

customRanges

Section titled "customRanges"

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

 
customRanges: CustomDateRange[]

disabledDates

Section titled "disabledDates"

Gets/sets disabled dates.

 
disabledDates: DateRangeDescriptor[]

displayFormat

Section titled "displayFormat"

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

 
displayFormat: string

headerOrientation

Section titled "headerOrientation"

The orientation of the calendar header.

 
headerOrientation: ContentOrientation

hideHeader

Section titled "hideHeader"

Determines whether the calendar hides its header.

 
hideHeader: boolean

hideOutsideDays

Section titled "hideOutsideDays"

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

 
hideOutsideDays: boolean

inputFormat

Section titled "inputFormat"

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

 
inputFormat: string

label

Section titled "label"

The label of the control (single input).

 
label: string

labelEnd

Section titled "labelEnd"

The label attribute of the end input.

 
labelEnd: string

labelStart

Section titled "labelStart"

The label attribute of the start input.

 
labelStart: string

locale

Section titled "locale"

The locale settings used to display the value.

 
locale: string

max

Section titled "max"

The maximum value required for the date range picker to remain valid.

 
max: Date | null

min

Section titled "min"

The minimum value required for the date range picker to remain valid.

 
min: Date | null

mode

Section titled "mode"

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

 
mode: PickerMode

nonEditable

Section titled "nonEditable"

Whether to allow typing in the input.

 
nonEditable: boolean

orientation

Section titled "orientation"

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

 
orientation: ContentOrientation

outlined

Section titled "outlined"

Whether the control will have outlined appearance.

 
outlined: boolean

placeholder

Section titled "placeholder"

The placeholder attribute of the control (single input).

 
placeholder: string

placeholderEnd

Section titled "placeholderEnd"

The placeholder attribute of the end input.

 
placeholderEnd: string

placeholderStart

Section titled "placeholderStart"

The placeholder attribute of the start input.

 
placeholderStart: string

prompt

Section titled "prompt"

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

 
prompt: string

readOnly

Section titled "readOnly"

Makes the control a readonly field.

 
readOnly: boolean

resourceStrings

Section titled "resourceStrings"

The resource strings of the date range picker.

 
resourceStrings: IgrDateRangePickerResourceStrings & IDateRangePickerResourceStrings & ICalendarResourceStrings

showWeekNumbers

Section titled "showWeekNumbers"

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

 
showWeekNumbers: boolean

specialDates

Section titled "specialDates"

Gets/sets special dates.

 
specialDates: DateRangeDescriptor[]

usePredefinedRanges

Section titled "usePredefinedRanges"

Whether the control will show chips with predefined ranges.

 
usePredefinedRanges: boolean

useTwoInputs

Section titled "useTwoInputs"

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

 
useTwoInputs: boolean

value

Section titled "value"

The value of the picker

 
value: DateRangeValue | null

visibleMonths

Section titled "visibleMonths"

The number of months displayed in the calendar.

 
visibleMonths: number

weekStart

Section titled "weekStart"

Sets the start day of the week for the calendar.

 
weekStart: WeekDays

Methods

Section titled "Methods"

clear

Section titled "clear"

Clears the input parts of the component of any user input

 
clear(): void

Returns void

select

Section titled "select"

Selects a date range value in the picker

 
select(value: DateRangeValue | null): void

Parameters

Returns void

Events

Section titled "Events"

onChange

Section titled "onChange"

Emitted when the user modifies and commits the elements's value.

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

Parameters

Returns void

onClosed

Section titled "onClosed"

Emitted after the calendar dropdown is hidden.

 
onClosed(args: CustomEvent<void>): void

Parameters

Returns void

onClosing

Section titled "onClosing"

Emitted just before the calendar dropdown is hidden.

 
onClosing(args: CustomEvent<void>): void

Parameters

Returns void

onInput

Section titled "onInput"

Emitted when when the user types in the element.

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

Parameters

Returns void

onOpened

Section titled "onOpened"

Emitted after the calendar dropdown is shown.

 
onOpened(args: CustomEvent<void>): void

Parameters

Returns void

onOpening

Section titled "onOpening"

Emitted just before the calendar dropdown is shown.

 
onOpening(args: CustomEvent<void>): void

Parameters

Returns void