Emitted when the user modifies and commits the elements's value.
Emitted after the calendar dropdown is hidden.
Emitted just before the calendar dropdown is hidden.
Emitted when when the user types in the element.
Emitted after the calendar dropdown is shown.
Emitted just before the calendar dropdown is shown.
Gets/Sets the date which is shown in the calendar picker and is highlighted. By default it is the current date.
Renders chips with custom ranges based on the elements of the array.
Gets/sets disabled dates.
Format to display the value in when not editing. Defaults to the input format if not set.
The orientation of the calendar header.
Determines whether the calendar hides its header.
Controls the visibility of the dates that do not belong to the current month.
The date format to apply on the inputs. Defaults to the current locale Intl.DateTimeFormat
The label of the control (single input).
The label attribute of the end input.
The label attribute of the start input.
The locale settings used to display the value.
The maximum value required for the date range picker to remain valid.
The minimum value required for the date range picker to remain valid.
Determines whether the calendar is opened in a dropdown or a modal dialog
Whether to allow typing in the input.
The orientation of the multiple months displayed in the calendar's days view.
Whether the control will have outlined appearance.
The placeholder attribute of the control (single input).
The placeholder attribute of the end input.
The placeholder attribute of the start input.
The prompt symbol to use for unfilled parts of the mask.
Makes the control a readonly field.
The resource strings of the date range picker.
Whether to show the number of the week in the calendar.
Gets/sets special dates.
Whether the control will show chips with predefined ranges.
Use two inputs to display the date range values. Makes the input editable in dropdown mode.
The number of months displayed in the calendar.
Sets the start day of the week for the calendar.
The igc-date-range-picker allows the user to select a range of dates.
Slot
prefix - Renders content before the input (single input).
Slot
prefix-start - Renders content before the start input (two inputs).
Slot
prefix-end - Renders content before the end input (two inputs).
Slot
suffix - Renders content after the input (single input).
Slot
suffix-start - Renders content after the start input (single input).
Slot
suffix-end - Renders content after the end input (single input).
Slot
helper-text - Renders content below the input.
Slot
bad-input - Renders content when the value is in the disabledDates ranges.
Slot
value-missing - Renders content when the required validation fails.
Slot
range-overflow - Renders content when the max validation fails.
Slot
range-underflow - Renders content when the min validation fails.
Slot
custom-error - Renders content when setCustomValidity(message) is set.
Slot
invalid - Renders content when the component is in invalid state (validity.valid = false).
Slot
title - Renders content in the calendar title.
Slot
header-date - Renders content instead of the current date/range in the calendar header.
Slot
clear-icon - Renders a clear icon template.
Slot
clear-icon-start - Renders a clear icon template for the start input (two inputs).
Slot
clear-icon-end - Renders a clear icon template for the end input (two inputs).
Slot
calendar-icon - Renders the icon/content for the calendar picker.
Slot
calendar-icon-start - Renders the icon/content for the calendar picker for the start input (two inputs).
Slot
calendar-icon-end - Renders the icon/content for the calendar picker for the end input (two inputs).
Slot
calendar-icon-open - Renders the icon/content for the picker in open state.
Slot
calendar-icon-open-start - Renders the icon/content for the picker in open state for the start input (two inputs).
Slot
calendar-icon-open-end - Renders the icon/content for the picker in open state for the end input (two inputs).
Slot
actions - Renders content in the action part of the picker in open state.
Slot
separator - Renders the separator element between the two inputs.
Csspart
separator - The separator element between the two inputs.
Csspart
ranges - The wrapper that renders the custom and predefined ranges.
Csspart
label - The label wrapper that renders content above the target input.
Csspart
calendar-icon - The calendar icon wrapper for closed state (single input).
Csspart
calendar-icon-start - The calendar icon wrapper for closed state for the start input (two inputs).
Csspart
calendar-icon-end - The calendar icon wrapper for closed state for the end input (two inputs).
Csspart
calendar-icon-open - The calendar icon wrapper for opened state (single input).
Csspart
calendar-icon-open-start - The calendar icon wrapper for opened state for the start input (two inputs).
Csspart
calendar-icon-open-end - The calendar icon wrapper for opened state for the end input (two inputs).
Csspart
clear-icon - The clear icon wrapper (single input).
Csspart
clear-icon-start - The clear icon wrapper for the start input (two inputs).
Csspart
clear-icon-end - The clear icon wrapper for the end input (two inputs).
Csspart
actions - The wrapper for the custom actions area.
Csspart
clear-icon - The clear icon wrapper.
Csspart
input - The native input element.
Csspart
prefix - The prefix wrapper.
Csspart
suffix - The suffix wrapper.
Csspart
helper-text - The helper-text wrapper that renders content below the target input.
Csspart
header - The calendar header element.
Csspart
header-title - The calendar header title element.
Csspart
header-date - The calendar header date element.
Csspart
calendar-content - The calendar content element which contains the views and navigation elements.
Csspart
navigation - The calendar navigation container element.
Csspart
months-navigation - The calendar months navigation button element.
Csspart
years-navigation - The calendar years navigation button element.
Csspart
years-range - The calendar years range element.
Csspart
navigation-buttons - The calendar navigation buttons container.
Csspart
navigation-button - The calendar previous/next navigation button.
Csspart
days-view-container - The calendar days view container element.
Csspart
days-view - The calendar days view element.
Csspart
months-view - The calendar months view element.
Csspart
years-view - The calendar years view element.
Csspart
days-row - The calendar days row element.
Csspart
calendar-label - The calendar week header label element.
Csspart
week-number - The calendar week number element.
Csspart
week-number-inner - The calendar week number inner element.
Csspart
date - The calendar date element.
Csspart
date-inner - The calendar date inner element.
Csspart
first - The calendar first selected date element in range selection.
Csspart
last - The calendar last selected date element in range selection.
Csspart
inactive - The calendar inactive date element.
Csspart
hidden - The calendar hidden date element.
Csspart
weekend - The calendar weekend date element.
Csspart
range - The calendar range selected element.
Csspart
special - The calendar special date element.
Csspart
disabled - The calendar disabled date element.
Csspart
single - The calendar single selected date element.
Csspart
preview - The calendar range selection preview date element.
Csspart
month - The calendar month element.
Csspart
month-inner - The calendar month inner element.
Csspart
year - The calendar year element.
Csspart
year-inner - The calendar year inner element.
Csspart
selected - The calendar selected state for element(s). Applies to date, month and year elements.
Csspart
current - The calendar current state for element(s). Applies to date, month and year elements.