The disabled state of the component.
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.
Sets the control into invalid state (visual state only).
Whether the component dropdown should be kept open on clicking outside of it.
Whether the component dropdown should be kept open on selection.
The label of the datepicker.
The locale settings used to display the value.
Determines whether the calendar is opened in a dropdown or a modal dialog
The name attribute of the control.
Whether to allow typing in the input.
Sets the state of the datepicker dropdown.
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.
The prompt symbol to use for unfilled parts of the mask.
Makes the control a readonly field.
The resource strings of the calendar.
Whether to show the number of the week in the calendar.
Gets/sets special dates.
The number of months displayed in the calendar.
Sets the start day of the week for the calendar.
Static
Readonly
tagReturns the HTML-uppercased qualified name.
Gets/Sets the date which is shown in the calendar picker and is highlighted. By default it is the current date.
The initial value of the component.
Gets/sets disabled dates.
Returns the HTMLFormElement associated with this element.
A string containing the validation message of this element.
Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.
A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.
Checks for validity of the control and emits the invalid event if it invalid.
Clears the input part of the component of any user input
Hides the component.
Checks for validity of the control and shows the browser message if it invalid.
Selects the text in the input of the component
Sets a custom validation message for the control.
As long as message
is not empty, the control is considered invalid.
Sets the text selection range in the input of the component
Shows the component.
Decrements the passed in date part
Increments the passed in date part
Toggles the open state of the component.
igc-date-picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up.
Element
igc-date-picker
Slot
prefix - Renders content before the input.
Slot
suffix - Renders content after the 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
calendar-icon - Renders the icon/content for the calendar picker.
Slot
calendar-icon-open - Renders the icon/content for the picker in open state.
Slot
actions - Renders content in the action part of the picker in open state.
Fires
igcOpening - Emitted just before the calendar dropdown is shown.
Fires
igcOpened - Emitted after the calendar dropdown is shown.
Fires
igcClosing - Emitted just before the calendar dropdown is hidden.
Fires
igcClosed - Emitted after the calendar dropdown is hidden.
Fires
igcChange - Emitted when the user modifies and commits the elements's value.
Fires
igcInput - Emitted when when the user types in the element.
Csspart
label - The label wrapper that renders content above the target input.
Csspart
container - The main wrapper that holds all main input elements.
Csspart
input - The native input element.
Csspart
prefix - The prefix wrapper.
Csspart
suffix - The suffix wrapper.
Csspart
calendar-icon - The calendar icon wrapper for closed state.
Csspart
calendar-icon-open - The calendar icon wrapper for opened state.
Csspart
clear-icon - The clear icon wrapper.
Csspart
actions - The actions 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.