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.
Clears the input part of the component of any user input
Selects the text in the input of the component
Sets the text selection range in the input of the component
Gets/Sets the date which is shown in the calendar picker and is highlighted. By default it is the current date.
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 input. Defaults to the current locale Intl.DateTimeFormat
The label of the datepicker.
The locale settings used to display the value.
The maximum value required for the date picker to remain valid.
The minimum value required for the date picker to remain valid.
Determines whether the calendar is opened in a dropdown or a modal dialog
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 value of the picker
The number of months displayed in the calendar.
Sets the start day of the week for the calendar.
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.
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.
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.