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

Properties

Section titled "Properties"

disabled

Section titled "disabled"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

The disabled state of the component.

 
disabled: boolean

Defined in src/internals/mixins/forms/types.ts:32

disabledDates

Section titled "disabledDates"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Gets/sets disabled dates.

 
disabledDates: DateRangeDescriptor[] = []

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

headerOrientation

Section titled "headerOrientation"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

The orientation of the calendar header.

 
headerOrientation: CalendarHeaderOrientation = 'horizontal'

Defined in src/components/date-picker/date-picker.base.ts:438

hideHeader

Section titled "hideHeader"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Determines whether the calendar hides its header.

 
hideHeader: boolean = false

Defined in src/components/date-picker/date-picker.base.ts:454

hideOutsideDays

Section titled "hideOutsideDays"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

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.base.ts:462

invalid

Section titled "invalid"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

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

 
invalid: boolean

Defined in src/internals/mixins/forms/types.ts:39

keepOpenOnOutsideClick

Section titled "keepOpenOnOutsideClick"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Keeps the dropdown of the component open when the user clicks outside of it.

 
keepOpenOnOutsideClick: boolean = false

Defined in src/internals/mixins/combo-box.ts:101

keepOpenOnSelect

Section titled "keepOpenOnSelect"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Keeps the dropdown of the component open after the user selects an item.

 
keepOpenOnSelect: boolean = false

Defined in src/internals/mixins/combo-box.ts:88

label

Section titled "label"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

The label of the picker.

 
label: string

Defined in src/components/date-picker/date-picker.base.ts:309

mode

Section titled "mode"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

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

 
mode: PickerMode = 'dropdown'

Defined in src/components/date-picker/date-picker.base.ts:278

name

Section titled "name"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

The name of the control, submitted with the form data.

 
name: string

Defined in src/internals/mixins/forms/types.ts:45

nonEditable

Section titled "nonEditable"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Whether to allow typing in the input.

 
nonEditable: boolean = false

Defined in src/components/date-picker/date-picker.base.ts:294

open

Section titled "open"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Sets the open state of the component.

 
open: boolean = false

Defined in src/internals/mixins/combo-box.ts:34

orientation

Section titled "orientation"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

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

 
orientation: ContentOrientation = 'horizontal'

Defined in src/components/date-picker/date-picker.base.ts:446

outlined

Section titled "outlined"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Whether the control will have outlined appearance.

 
outlined: boolean = false

Defined in src/components/date-picker/date-picker.base.ts:302

placeholder

Section titled "placeholder"

The placeholder text of the control.

 
placeholder: string

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

prompt

Section titled "prompt"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

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

 
prompt: string = '_'

Defined in src/components/date-picker/date-picker.base.ts:317

readOnly

Section titled "readOnly"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Makes the control a readonly field.

 
readOnly: boolean = false

Defined in src/components/date-picker/date-picker.base.ts:286

scrollStrategy

Section titled "scrollStrategy"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Sets the behavior of the component when the parent container scrolls.

If the value is hide, the component hides while the anchor is fully out of view. hide is the default value.

If the value is scroll, the component stays visible and anchored.

If the value is close, the component closes on each scroll.

 
scrollStrategy: PopoverScrollStrategy = 'hide'

Defined in src/internals/mixins/combo-box.ts:49

showWeekNumbers

Section titled "showWeekNumbers"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

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

 
showWeekNumbers: boolean = false

Defined in src/components/date-picker/date-picker.base.ts:470

specialDates

Section titled "specialDates"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Gets/sets special dates.

 
specialDates: DateRangeDescriptor[]

Defined in src/components/date-picker/date-picker.base.ts:403

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:153

Accessors

Section titled "Accessors"

activeDate

Section titled "activeDate"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent) 

get activeDate(): any

Defined in src/components/date-picker/date-picker.base.ts:410

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.base.ts:410

Parameters

  • value: string | Date | null | undefined

Returns void

defaultValue

Section titled "defaultValue"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent) 

get defaultValue(): any

Defined in src/internals/mixins/forms/types.ts:127

The initial value of the component.

 
set defaultValue(value: unknown): void

Defined in src/internals/mixins/forms/types.ts:127

Parameters

  • value: unknown

Returns void

displayFormat

Section titled "displayFormat"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent) 

get displayFormat(): any

Defined in src/components/date-picker/date-picker.base.ts:325

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.base.ts:325

Parameters

  • value: string

Returns void

form

Section titled "form"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Returns the HTMLFormElement associated with this element.

 
get form(): HTMLFormElement | null

Defined in src/internals/mixins/forms/types.ts:48

Returns HTMLFormElement | null

inputFormat

Section titled "inputFormat"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent) 

get inputFormat(): any

Defined in src/components/date-picker/date-picker.base.ts:339

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.base.ts:339

Parameters

  • value: string

Returns void

locale

Section titled "locale"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

The locale used to format the display value and to resolve the component's resource strings. Falls back to the global locale when not set.

 
set locale(value: string): void

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

Parameters

  • value: string

Returns void

max

Section titled "max"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

The maximum value required for the picker to remain valid.

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

Defined in src/components/date-picker/date-picker.base.ts:381

Parameters

  • value: string | Date | null | undefined

Returns void

min

Section titled "min"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

The minimum value required for the picker to remain valid.

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

Defined in src/components/date-picker/date-picker.base.ts:366

Parameters

  • value: string | Date | null | undefined

Returns void

required

Section titled "required"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent) 

get required(): any

Defined in src/internals/mixins/forms/types.ts:151

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

 
set required(value: boolean): void

Defined in src/internals/mixins/forms/types.ts:151

Parameters

  • value: boolean

Returns void

resourceStrings

Section titled "resourceStrings" 
get resourceStrings(): any

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

The resource strings for localization.

 
set resourceStrings(value: IgcCalendarResourceStrings | DatePickerResourceStringsType): void

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

Parameters

Returns void

validationMessage

Section titled "validationMessage"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

A string containing the validation message of this element.

 
get validationMessage(): string

Defined in src/internals/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Returns a ValidityState object for the element.

 
get validity(): ValidityState

Defined in src/internals/mixins/forms/types.ts:51

Returns ValidityState

value

Section titled "value" 
get value(): any

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

The value of the picker.

Only ever holds a committed value. While the user is typing in the input, the intermediate state stays in the editor and is committed - together with an igcChange event - when the edit is committed on blur. Use the igcInput event to observe the value as it is being typed.

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

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

Parameters

  • value: string | Date | null | undefined

Returns void

visibleMonths

Section titled "visibleMonths"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent) 

get visibleMonths(): any

Defined in src/components/date-picker/date-picker.base.ts:424

The number of months displayed in the calendar.

 
set visibleMonths(value: number): void

Defined in src/components/date-picker/date-picker.base.ts:424

Parameters

  • value: number

Returns void

weekStart

Section titled "weekStart"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent) 

get weekStart(): any

Defined in src/components/date-picker/date-picker.base.ts:481

Sets the start day of the week for the calendar.

 
set weekStart(value: WeekDays | undefined): void

Defined in src/components/date-picker/date-picker.base.ts:481

Parameters

  • value: WeekDays | undefined

Returns void

willValidate

Section titled "willValidate"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Returns true when the element is a candidate for constraint validation.

 
get willValidate(): boolean

Defined in src/internals/mixins/forms/types.ts:59

Returns boolean

Methods

Section titled "Methods"

checkValidity

Section titled "checkValidity"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Checks validity and emits invalid when the control is invalid.

 
checkValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:114

Returns boolean

clear

Section titled "clear"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Clears the editor(s) of the picker of any user input.

 
clear(): void

Defined in src/components/date-picker/date-picker.base.ts:590

Returns void

hide

Section titled "hide"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Hides the component.

 
hide(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:69

Returns Promise<boolean>

reportValidity

Section titled "reportValidity"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Checks validity and shows the browser message when invalid.

 
reportValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:117

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:389

Returns void

setCustomValidity

Section titled "setCustomValidity"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Sets a custom message. Invalid while message is not empty.

 
setCustomValidity(message: string): void

Defined in src/internals/mixins/forms/types.ts:120

Parameters

  • message: string

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:395

Parameters

  • start: number
  • end: number
  • direction: SelectionRangeDirection

Returns void

show

Section titled "show"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Shows the component.

 
show(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:64

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:384

Parameters

  • datePart: DatePart
  • delta: number

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:379

Parameters

  • datePart: DatePart
  • delta: number

Returns void

toggle

Section titled "toggle"

Inherited from: EventEmitterMixin< IgcDatePickerComponentEventMap, AbstractConstructor<IgcDatePickerBaseComponent<Date>> >(IgcDatePickerBaseComponent)

Toggles the open state of the component.

 
toggle(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:74

Returns Promise<boolean>