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.
- Slots
-
prefix— Renders content before the input. -
suffix— Renders content after the 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. -
calendar-icon— Renders the icon/content for the calendar picker. -
calendar-icon-open— Renders the icon/content for the picker in open state. -
actions— Renders content in the action part of the picker in open state.
- CSS Parts
label— The label wrapper that renders content above the target input.container— The main wrapper that holds all main input elements.input— The native input element.prefix— The prefix wrapper.suffix— The suffix wrapper.calendar-icon— The calendar icon wrapper for closed state.calendar-icon-open— The calendar icon wrapper for opened state.clear-icon— The clear icon wrapper.actions— The actions 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: DatedisabledDates
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: stringheaderOrientation
Section titled "headerOrientation"The orientation of the calendar header.
headerOrientation: CalendarHeaderOrientationhideHeader
Section titled "hideHeader"Determines whether the calendar hides its header.
hideHeader: booleanhideOutsideDays
Section titled "hideOutsideDays"Controls the visibility of the dates that do not belong to the current month.
hideOutsideDays: booleaninputFormat
Section titled "inputFormat"The date format to apply on the input. Defaults to the current locale Intl.DateTimeFormat
inputFormat: stringlabel
Section titled "label"The label of the datepicker.
label: stringlocale
Section titled "locale"Gets/Sets the locale used for formatting the display value.
locale: stringThe maximum value required for the date picker to remain valid.
max: DateThe minimum value required for the date picker to remain valid.
min: DateDetermines whether the calendar is opened in a dropdown or a modal dialog
mode: PickerModenonEditable
Section titled "nonEditable"Whether to allow typing in the input.
nonEditable: booleanSets the state of the datepicker dropdown.
open: booleanorientation
Section titled "orientation"The orientation of the multiple months displayed in the calendar's days view.
orientation: ContentOrientationoutlined
Section titled "outlined"Whether the control will have outlined appearance.
outlined: booleanplaceholder
Section titled "placeholder"The placeholder attribute of the control.
placeholder: stringprompt
Section titled "prompt"The prompt symbol to use for unfilled parts of the mask.
prompt: stringreadOnly
Section titled "readOnly"Makes the control a readonly field.
readOnly: booleanresourceStrings
Section titled "resourceStrings"The resource strings for localization.
resourceStrings: IgrCalendarResourceStringsshowWeekNumbers
Section titled "showWeekNumbers"Whether to show the number of the week in the calendar.
showWeekNumbers: booleanspecialDates
Section titled "specialDates"Gets/sets special dates.
specialDates: DateRangeDescriptor[]value
Section titled "value"The value of the picker
value: DatevisibleMonths
Section titled "visibleMonths"The number of months displayed in the calendar.
visibleMonths: numberweekStart
Section titled "weekStart"Sets the start day of the week for the calendar.
weekStart: WeekDaysMethods
Section titled "Methods"clear
Section titled "clear"Clears the input part of the component of any user input
clear(): voidReturns void
select
Section titled "select"Selects the text in the input of the component
select(): voidReturns void
setRangeText
Section titled "setRangeText"setRangeText(replacement: string, start: number, end: number, mode: RangeTextSelectMode): voidParameters
- replacement:
string - start:
number - end:
number - mode:
RangeTextSelectMode
Returns void
setSelectionRange
Section titled "setSelectionRange"Sets the text selection range in the input of the component
setSelectionRange(start: number, end: number, direction: SelectionRangeDirection): voidParameters
- start:
number - end:
number - direction:
SelectionRangeDirection
Returns void
stepDown
Section titled "stepDown"Decrements the passed in date part
stepDown(datePart: DatePart, delta: number): voidParameters
- datePart:
DatePart - delta:
number
Returns void
stepUp
Section titled "stepUp"Increments the passed in date part
stepUp(datePart: DatePart, delta: number): voidParameters
- datePart:
DatePart - delta:
number
Returns void
Events
Section titled "Events"onChange
Section titled "onChange"Emitted when the user modifies and commits the elements's value.
onChange(args: CustomEvent<Date>): voidParameters
- args:
CustomEvent<Date>
Returns void
onClosed
Section titled "onClosed"Emitted after the calendar dropdown is hidden.
onClosed(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onClosing
Section titled "onClosing"Emitted just before the calendar dropdown is hidden.
onClosing(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onInput
Section titled "onInput"Emitted when when the user types in the element.
onInput(args: CustomEvent<Date>): voidParameters
- args:
CustomEvent<Date>
Returns void
onOpened
Section titled "onOpened"Emitted after the calendar dropdown is shown.
onOpened(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onOpening
Section titled "onOpening"Emitted just before the calendar dropdown is shown.
onOpening(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>