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

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

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

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

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

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

keepOpenOnOutsideClick

Section titled "keepOpenOnOutsideClick"

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

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

 
keepOpenOnOutsideClick: boolean = false

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

keepOpenOnSelect

Section titled "keepOpenOnSelect"

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

Whether the component dropdown should be kept open on selection.

 
keepOpenOnSelect: boolean = false

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

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

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

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

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

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

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

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

placeholder

Section titled "placeholder"

The placeholder text of the control.

 
placeholder: string

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

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

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

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

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

weekStart

Section titled "weekStart"

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

Sets the start day of the week for the calendar.

 
weekStart: WeekDays = 'sunday'

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

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

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

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

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

The initial value of the component.

 
set defaultValue(value: unknown): void

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

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

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

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

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

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

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

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

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

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

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

 
set required(value: boolean): void

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

Parameters

  • value: boolean

Returns void

resourceStrings

Section titled "resourceStrings" 
get resourceStrings(): any

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

The resource strings for localization.

 
set resourceStrings(value: IgcCalendarResourceStrings | DatePickerResourceStringsType): void

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

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

Returns string

validity

Section titled "validity"

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

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/internals/mixins/forms/types.ts:52

Returns ValidityState

value

Section titled "value" 
get value(): any

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

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

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

The number of months displayed in the calendar.

 
set visibleMonths(value: number): void

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

Parameters

  • value: number

Returns void

willValidate

Section titled "willValidate"

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

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/internals/mixins/forms/types.ts:61

Returns boolean

Methods

Section titled "Methods"

checkValidity

Section titled "checkValidity"

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

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

 
checkValidity(): boolean

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

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

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

Returns Promise<boolean>

reportValidity

Section titled "reportValidity"

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

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

 
reportValidity(): boolean

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

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

Returns void

setCustomValidity

Section titled "setCustomValidity"

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

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/internals/mixins/forms/types.ts:175

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

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

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

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

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

Returns Promise<boolean>