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
title - Renders content in the calendar title.
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.
Gets/Sets the date which is shown in the calendar picker and is highlighted.
By default it is the current date.
Parameters
value: Date
Returns void
disabledDates
set disabledDates(dates): void
Gets/sets disabled dates.
Parameters
dates: DateRangeDescriptor[]
Returns void
displayFormat
set displayFormat(value): void
Format to display the value in when not editing.
Defaults to the input format if not set.
Attr
display-format
Parameters
value: string
Returns void
form
get form(): null | HTMLFormElement
Returns the HTMLFormElement associated with this element.
Returns null | HTMLFormElement
inputFormat
set inputFormat(value): void
The date format to apply on the input.
Defaults to the current locale Intl.DateTimeFormat
Attr
input-format
Parameters
value: string
Returns void
max
set max(value): void
The maximum value required for the date picker to remain valid.
Attr
Parameters
value: Date
Returns void
min
set min(value): void
The minimum value required for the date picker to remain valid.
Attr
Parameters
value: Date
Returns void
validationMessage
get validationMessage(): string
A string containing the validation message of this element.
Returns string
validity
get validity(): ValidityState
Returns a ValidityState object which represents the different validity states
the element can be in, with respect to constraint validation.
Returns ValidityState
value
set value(value): void
The value of the picker
Attr
Parameters
value: null | Date
Returns void
willValidate
get willValidate(): boolean
A boolean value which returns true if the element is a submittable element
that is a candidate for constraint validation.
Returns boolean
checkValidity
checkValidity(): boolean
Checks for validity of the control and emits the invalid event if it invalid.
Returns boolean
clear
clear(): void
Clears the input part of the component of any user input
Returns void
hide
hide(): Promise<boolean>
Hides the component.
Returns Promise<boolean>
reportValidity
reportValidity(): boolean
Checks for validity of the control and shows the browser message if it invalid.
Returns boolean
select
select(): void
Selects the text in the input of the component
Returns void
setCustomValidity
setCustomValidity(message): void
Sets a custom validation message for the control.
As long as message is not empty, the control is considered invalid.
Parameters
message: string
Returns void
setSelectionRange
setSelectionRange(start, end, direction?): void
Sets the text selection range in the input of the component
Parameters
start: number
end: number
direction: SelectionRangeDirection
Returns void
show
show(): Promise<boolean>
Shows the component.
Returns Promise<boolean>
stepDown
stepDown(datePart?, delta?): void
Decrements the passed in date part
Parameters
datePart: DatePart
delta: number
Returns void
stepUp
stepUp(datePart?, delta?): void
Increments the passed in date part
Parameters
datePart: DatePart
delta: number
Returns void
toggle
toggle(): Promise<boolean>
Toggles the open state of the component.
Returns Promise<boolean>
lifecycle
connectedCallback
connectedCallback(): void
Invoked when the component is added to the document's DOM.
In connectedCallback() you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.
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
title - Renders content in the calendar title.
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.