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
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.

Constructors

Section titled "Constructors"

IgcDatePickerComponent 

new IgcDatePickerComponent(): IgcDatePickerComponent

Defined in src/components/date-picker/date-picker.ts:511

Returns IgcDatePickerComponent

Properties

Section titled "Properties"

disabled

Section titled "disabled"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

The disabled state of the component.

 
disabled: boolean

Defined in src/components/common/mixins/forms/types.ts:29

emitEvent

Section titled "emitEvent"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

emitEvent: object & object

Defined in src/components/common/mixins/event-emitter.ts:30, src/components/common/mixins/combo-box.ts:16

headerOrientation

Section titled "headerOrientation"

The orientation of the calendar header.

 
headerOrientation: CalendarHeaderOrientation = 'horizontal'

Defined in src/components/date-picker/date-picker.ts:362

hideHeader

Section titled "hideHeader"

Determines whether the calendar hides its header.

 
hideHeader: boolean = false

Defined in src/components/date-picker/date-picker.ts:376

hideOutsideDays

Section titled "hideOutsideDays"

Controls the visibility of the dates that do not belong to the current month.

 
hideOutsideDays: boolean = false

Defined in src/components/date-picker/date-picker.ts:383

invalid

Section titled "invalid"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Sets the control into invalid state (visual state only).

 
invalid: boolean

Defined in src/components/common/mixins/forms/types.ts:36

keepOpenOnOutsideClick

Section titled "keepOpenOnOutsideClick"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Whether the component dropdown should be kept open on clicking outside of it.

 
keepOpenOnOutsideClick: boolean = false

Defined in src/components/common/mixins/combo-box.ts:120

keepOpenOnSelect

Section titled "keepOpenOnSelect"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Whether the component dropdown should be kept open on selection.

 
keepOpenOnSelect: boolean = false

Defined in src/components/common/mixins/combo-box.ts:108

label

Section titled "label"

The label of the datepicker.

 
label: string

Defined in src/components/date-picker/date-picker.ts:277

mode

Section titled "mode"

Determines whether the calendar is opened in a dropdown or a modal dialog

 
mode: PickerMode = 'dropdown'

Defined in src/components/date-picker/date-picker.ts:284

name

Section titled "name"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

The name attribute of the control.

 
name: string

Defined in src/components/common/mixins/forms/types.ts:42

nonEditable

Section titled "nonEditable"

Whether to allow typing in the input.

 
nonEditable: boolean = false

Defined in src/components/date-picker/date-picker.ts:291

open

Section titled "open"

Sets the state of the datepicker dropdown.

 
open: boolean = false

Defined in src/components/date-picker/date-picker.ts:270

orientation

Section titled "orientation"

The orientation of the multiple months displayed in the calendar's days view.

 
orientation: ContentOrientation = 'horizontal'

Defined in src/components/date-picker/date-picker.ts:369

outlined

Section titled "outlined"

Whether the control will have outlined appearance.

 
outlined: boolean = false

Defined in src/components/date-picker/date-picker.ts:406

placeholder

Section titled "placeholder"

The placeholder attribute of the control.

 
placeholder: string

Defined in src/components/date-picker/date-picker.ts:413

prompt

Section titled "prompt"

The prompt symbol to use for unfilled parts of the mask.

 
prompt: string = '_'

Defined in src/components/date-picker/date-picker.ts:461

readOnly

Section titled "readOnly"

Makes the control a readonly field.

 
readOnly: boolean = false

Defined in src/components/date-picker/date-picker.ts:298

showWeekNumbers

Section titled "showWeekNumbers"

Whether to show the number of the week in the calendar.

 
showWeekNumbers: boolean = false

Defined in src/components/date-picker/date-picker.ts:427

specialDates

Section titled "specialDates"

Gets/sets special dates.

 
specialDates: DateRangeDescriptor[]

Defined in src/components/date-picker/date-picker.ts:399

visibleMonths

Section titled "visibleMonths"

The number of months displayed in the calendar.

 
visibleMonths: number = 1

Defined in src/components/date-picker/date-picker.ts:420

weekStart

Section titled "weekStart"

Sets the start day of the week for the calendar.

 
weekStart: WeekDays = 'sunday'

Defined in src/components/date-picker/date-picker.ts:493

styles

Section titled "styles" 
styles: CSSResult[]

Defined in src/components/date-picker/date-picker.ts:185

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-date-picker" = 'igc-date-picker'

Defined in src/components/date-picker/date-picker.ts:184

Accessors

Section titled "Accessors"

activeDate

Section titled "activeDate" 
get activeDate(): Date

Defined in src/components/date-picker/date-picker.ts:323

Returns Date

Gets/Sets the date which is shown in the calendar picker and is highlighted. By default it is the current date.

 
set activeDate(value: string | Date | null | undefined): void

Defined in src/components/date-picker/date-picker.ts:319

Parameters

  • value: string | Date | null | undefined

Returns void

defaultValue

Section titled "defaultValue"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

get defaultValue(): unknown

Defined in src/components/common/mixins/forms/types.ts:163

Returns unknown

The initial value of the component.

 
set defaultValue(value: unknown): void

Defined in src/components/common/mixins/forms/types.ts:162

Parameters

  • value: unknown

Returns void

disabledDates

Section titled "disabledDates"

Gets/sets disabled dates.

 
set disabledDates(dates: DateRangeDescriptor[]): void

Defined in src/components/date-picker/date-picker.ts:387

Parameters

Returns void

displayFormat

Section titled "displayFormat" 
get displayFormat(): string

Defined in src/components/date-picker/date-picker.ts:439

Returns string

Format to display the value in when not editing. Defaults to the locale format if not set.

 
set displayFormat(value: string): void

Defined in src/components/date-picker/date-picker.ts:435

Parameters

  • value: string

Returns void

form

Section titled "form"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Returns the HTMLFormElement associated with this element.

 
get form(): HTMLFormElement | null

Defined in src/components/common/mixins/forms/types.ts:45

Returns HTMLFormElement | null

inputFormat

Section titled "inputFormat" 
get inputFormat(): string

Defined in src/components/date-picker/date-picker.ts:453

Returns string

The date format to apply on the input. Defaults to the current locale Intl.DateTimeFormat

 
set inputFormat(value: string): void

Defined in src/components/date-picker/date-picker.ts:449

Parameters

  • value: string

Returns void

locale

Section titled "locale" 
get locale(): string

Defined in src/components/date-picker/date-picker.ts:472

Returns string

Gets/Sets the locale used for formatting the display value.

 
set locale(value: string): void

Defined in src/components/date-picker/date-picker.ts:468

Parameters

  • value: string

Returns void

max

Section titled "max" 
get max(): Date | null

Defined in src/components/date-picker/date-picker.ts:353

Returns Date | null

The maximum value required for the date picker to remain valid.

 
set max(value: string | Date | null | undefined): void

Defined in src/components/date-picker/date-picker.ts:347

Parameters

  • value: string | Date | null | undefined

Returns void

min

Section titled "min" 
get min(): Date | null

Defined in src/components/date-picker/date-picker.ts:338

Returns Date | null

The minimum value required for the date picker to remain valid.

 
set min(value: string | Date | null | undefined): void

Defined in src/components/date-picker/date-picker.ts:332

Parameters

  • value: string | Date | null | undefined

Returns void

required

Section titled "required"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

get required(): boolean

Defined in src/components/common/mixins/forms/types.ts:181

Returns boolean

When set, makes the component a required field for validation.

 
set required(value: boolean): void

Defined in src/components/common/mixins/forms/types.ts:180

Parameters

  • value: boolean

Returns void

resourceStrings

Section titled "resourceStrings" 
get resourceStrings(): IgcCalendarResourceStrings & IDatePickerResourceStrings & ICalendarResourceStrings

Defined in src/components/date-picker/date-picker.ts:486

Returns IgcCalendarResourceStrings & IDatePickerResourceStrings & ICalendarResourceStrings

The resource strings for localization.

 
set resourceStrings(value: IgcCalendarResourceStrings | DatePickerResourceStringsType): void

Defined in src/components/date-picker/date-picker.ts:480

Parameters

Returns void

validationMessage

Section titled "validationMessage"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

A string containing the validation message of this element.

 
get validationMessage(): string

Defined in src/components/common/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

 
get validity(): ValidityState

Defined in src/components/common/mixins/forms/types.ts:51

Returns ValidityState

value

Section titled "value" 
get value(): Date | null

Defined in src/components/date-picker/date-picker.ts:310

Returns Date | null

The value of the picker

 
set value(value: string | Date | null | undefined): void

Defined in src/components/date-picker/date-picker.ts:306

Parameters

  • value: string | Date | null | undefined

Returns void

willValidate

Section titled "willValidate"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

 
get willValidate(): boolean

Defined in src/components/common/mixins/forms/types.ts:60

Returns boolean

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

checkValidity

Section titled "checkValidity"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Checks for validity of the control and emits the invalid event if it invalid.

 
checkValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:146

Returns boolean

clear

Section titled "clear"

Clears the input part of the component of any user input

 
clear(): void

Defined in src/components/date-picker/date-picker.ts:650

Returns void

hide

Section titled "hide"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Hides the component.

 
hide(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:90

Returns Promise<boolean>

removeEventListener

Section titled "removeEventListener"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

reportValidity

Section titled "reportValidity"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Checks for validity of the control and shows the browser message if it invalid.

 
reportValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:149

Returns boolean

select

Section titled "select"

Selects the text in the input of the component

 
select(): void

Defined in src/components/date-picker/date-picker.ts:667

Returns void

setCustomValidity

Section titled "setCustomValidity"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

 
setCustomValidity(message: string): void

Defined in src/components/common/mixins/forms/types.ts:155

Parameters

  • message: string

Returns void

setRangeText

Section titled "setRangeText" 
setRangeText(replacement: string, start: number, end: number, mode: RangeTextSelectMode): void

Defined in src/components/date-picker/date-picker.ts:683

Parameters

Returns void

setSelectionRange

Section titled "setSelectionRange"

Sets the text selection range in the input of the component

 
setSelectionRange(start: number, end: number, direction: SelectionRangeDirection): void

Defined in src/components/date-picker/date-picker.ts:673

Parameters

Returns void

show

Section titled "show"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Shows the component.

 
show(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:85

Returns Promise<boolean>

stepDown

Section titled "stepDown"

Decrements the passed in date part

 
stepDown(datePart: DatePart, delta: number): void

Defined in src/components/date-picker/date-picker.ts:662

Parameters

Returns void

stepUp

Section titled "stepUp"

Increments the passed in date part

 
stepUp(datePart: DatePart, delta: number): void

Defined in src/components/date-picker/date-picker.ts:657

Parameters

Returns void

toggle

Section titled "toggle"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Toggles the open state of the component.

 
toggle(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:95

Returns Promise<boolean>

register

Section titled "register" 
register(): void

Defined in src/components/date-picker/date-picker.ts:188

Returns void

Events

Section titled "Events"

igcChange

Section titled "igcChange" 
igcChange: CustomEvent<Date | null>

Defined in src/components/date-picker/date-picker.ts:71

igcClosed

Section titled "igcClosed" 
igcClosed: CustomEvent<void>

Defined in src/components/date-picker/date-picker.ts:70

igcClosing

Section titled "igcClosing" 
igcClosing: CustomEvent<void>

Defined in src/components/date-picker/date-picker.ts:69

igcInput

Section titled "igcInput" 
igcInput: CustomEvent<Date | null>

Defined in src/components/date-picker/date-picker.ts:72

igcOpened

Section titled "igcOpened" 
igcOpened: CustomEvent<void>

Defined in src/components/date-picker/date-picker.ts:68

igcOpening

Section titled "igcOpening" 
igcOpening: CustomEvent<void>

Defined in src/components/date-picker/date-picker.ts:67