Date Picker displays a popup calendar that lets users select a single date.
Igx Module
IgxDatePickerModule
Igx Theme
igx-calendar-theme, igx-icon-theme
Igx Keywords
datepicker, calendar, schedule, date
Igx Group
Scheduling

Example

<igx-date-picker [(ngModel)]="selectedDate"></igx-date-picker>

Constructors

Section titled "Constructors"

IgxDatePickerComponent 

new IgxDatePickerComponent(): IgxDatePickerComponent

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:515

Returns IgxDatePickerComponent

Properties

Section titled "Properties"

calendarFormat

Section titled "calendarFormat"

Gets/Sets the format options of the date picker.

 
calendarFormat: IFormattingOptions

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:318

Example

this.datePicker.calendarFormat = {day: "numeric",  month: "long", weekday: "long", year: "numeric"};

cancelButtonLabel

Section titled "cancelButtonLabel"

Gets/Sets the cancel button's label.

 
cancelButtonLabel: string

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:221

Example

<igx-date-picker cancelButtonLabel="Cancel"></igx-date-picker>

closed

Section titled "closed"

Inherited from: PickerBaseDirective

Emitted after the calendar has closed.

 
closed: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:278

Example

<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>

closing

Section titled "closing"

Inherited from: PickerBaseDirective

Emitted when the calendar has started closing, cancelable.

 
closing: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:267

Example

<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>

disabled

Section titled "disabled"

Inherited from: PickerBaseDirective

Enables or disables the picker.

 
disabled: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:144

Example

<igx-date-picker [disabled]="'true'"></igx-date-picker>

displayMonthsCount

Section titled "displayMonthsCount"

Gets/Sets the number of month views displayed.

 
displayMonthsCount: number = 1

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:152

Remarks

Default value is 1.

Example

<igx-date-picker [displayMonthsCount]="2"></igx-date-picker>

element

Section titled "element"

Inherited from: PickerBaseDirective 

element: ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:31

formatter

Section titled "formatter"

Gets/Sets a custom formatter function on the selected or passed date.

 
formatter: object

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:199

Example

<igx-date-picker [value]="date" [formatter]="formatter"></igx-date-picker>

formatViews

Section titled "formatViews"

Gets/Sets the format views of the date picker.

 
formatViews: IFormattingViews

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:271

Example

let formatViews = this.datePicker.formatViews;
 this.datePicker.formatViews = {day:false, month: false, year:false};

headerOrientation

Section titled "headerOrientation"

Inherited from: PickerBaseDirective

Gets/Sets the orientation of the date picker header.

 
headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:111

Example

<igx-date-picker headerOrientation="vertical"></igx-date-picker>

hideHeader

Section titled "hideHeader"

Inherited from: PickerBaseDirective

Gets/Sets whether the header is hidden in dialog mode.

 
hideHeader: boolean = false

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:122

Example

<igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker>

hideOutsideDays

Section titled "hideOutsideDays"

Gets/Sets whether the inactive dates will be hidden.

 
hideOutsideDays: boolean

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:134

Remarks

Applies to dates that are out of the current month. Default value is false.

Example

<igx-date-picker [hideOutsideDays]="true"></igx-date-picker>

id

Section titled "id"

Gets/Sets the value of id attribute.

 
id: string

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:257

Remarks

If not provided it will be automatically generated.

Example

<igx-date-picker [id]="'igx-date-picker-3'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>

mode

Section titled "mode"

Inherited from: PickerBaseDirective

Can be dropdown with editable input field or dialog with readonly input field.

 
mode: PickerInteractionMode = PickerInteractionMode.DropDown

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:100

Remarks

Default mode is dropdown

Example

<igx-date-picker mode="dialog"></igx-date-picker>

opened

Section titled "opened"

Inherited from: PickerBaseDirective

Emitted after the calendar has opened.

 
opened: EventEmitter<IBaseEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:256

Example

<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>

opening

Section titled "opening"

Inherited from: PickerBaseDirective

Emitted when the calendar has started opening, cancelable.

 
opening: EventEmitter<IBaseCancelableBrowserEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:245

Example

<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>

orientation

Section titled "orientation"

Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view.

 
orientation: PickerCalendarOrientation = PickerCalendarOrientation.Horizontal

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:161

Example

<igx-date-picker orientation="vertical"></igx-date-picker>

outlet

Section titled "outlet"

Inherited from: PickerBaseDirective

The container used for the pop-up element.

 
outlet: IgxOverlayOutletDirective | ElementRef<any>

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:204

Example

<div igxOverlayOutlet #outlet="overlay-outlet"></div>
<!-- ... -->
<igx-date-picker [outlet]="outlet"></igx-date-picker>
<!-- ... -->

overlaySettings

Section titled "overlaySettings"

Inherited from: PickerBaseDirective

Overlay settings used to display the pop-up element.

 
overlaySettings: OverlaySettings

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:133

Example

<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>

placeholder

Section titled "placeholder"

Inherited from: PickerBaseDirective

Sets the placeholder of the picker's input.

 
placeholder: string = ''

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:86

Example

<igx-date-picker [placeholder]="'Choose your date'"></igx-date-picker>

resourceStrings

Section titled "resourceStrings"

Gets/Sets the resource strings for the picker's default toggle icon. By default it uses EN resources.

 
resourceStrings: IDatePickerResourceStrings

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:381

showWeekNumbers

Section titled "showWeekNumbers"

Show/hide week numbers

 
showWeekNumbers: boolean

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:172

Example

<igx-date-picker [showWeekNumbers]="true"></igx-date-picker>
``

spinDelta

Section titled "spinDelta"

Delta values used to increment or decrement each editor date part on spin actions. All values default to 1.

 
spinDelta: Pick<DatePartDeltas, "date" | "month" | "year">

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:244

Example

<igx-date-picker [spinDelta]="{ date: 5, month: 2 }"></igx-date-picker>

spinLoop

Section titled "spinLoop"

Specify if the currently spun date segment should loop over.

 
spinLoop: boolean = true

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:232

Example

<igx-date-picker [spinLoop]="false"></igx-date-picker>

tabIndex

Section titled "tabIndex"

Inherited from: PickerBaseDirective

Gets/Sets the default template editor's tabindex.

 
tabIndex: string | number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:234

Example

<igx-date-picker [tabIndex]="1"></igx-date-picker>

todayButtonLabel

Section titled "todayButtonLabel"

Gets/Sets the today button's label.

 
todayButtonLabel: string

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:210

Example

<igx-date-picker todayButtonLabel="Today"></igx-date-picker>

validationFailed

Section titled "validationFailed"

Emitted when the user types/spins invalid date in the date-picker editor.

 
validationFailed: EventEmitter<IDatePickerValidationFailedEventArgs>

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:410

Example

<igx-date-picker (validationFailed)="onValidationFailed($event)"></igx-date-picker>

valueChange

Section titled "valueChange"

Emitted when the picker's value changes.

 
valueChange: EventEmitter<Date>

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:399

Remarks

Used for two-way bindings.

Example

<igx-date-picker [(value)]="date"></igx-date-picker>

Accessors

Section titled "Accessors"

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, or the value of the picker, if set.

 
get activeDate(): Date

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:180

Returns Date 

set activeDate(value: Date): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:186

Parameters

  • value: Date

Returns void

collapsed

Section titled "collapsed"

Inherited from: PickerBaseDirective

Gets the picker's pop-up state.

 
get collapsed(): boolean

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:316

Example

const state = this.picker.collapsed;

Returns boolean

disabledDates

Section titled "disabledDates"

Gets/Sets the disabled dates descriptors.

 
get disabledDates(): DateRangeDescriptor[]

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:283

Example

let disabledDates = this.datepicker.disabledDates;
this.datePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...];

Returns DateRangeDescriptor[] 

set disabledDates(value: DateRangeDescriptor[]): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:286

Parameters

Returns void

displayFormat

Section titled "displayFormat"

Inherited from: PickerBaseDirective 

get displayFormat(): string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:73

Returns string

The format used to display the picker's value when it's not being edited.

 
set displayFormat(value: string): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:69

Example

<igx-date-picker displayFormat="EE/M/yy"></igx-date-picker>

Parameters

  • value: string

Returns void

inputFormat

Section titled "inputFormat"

Inherited from: PickerBaseDirective 

get inputFormat(): string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:52

Returns string

The editor's input mask.

 
set inputFormat(value: string): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:48

Example

<igx-date-picker inputFormat="dd/MM/yy"></igx-date-picker>

Parameters

  • value: string

Returns void

locale

Section titled "locale"

Inherited from: PickerBaseDirective

Gets the locale of the date-picker. If not set, defaults to applciation's locale..

 
get locale(): string

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:157

Returns string

Sets the locale of the date-picker. Expects a valid BCP 47 language tag.

 
set locale(value: string): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:165

Parameters

  • value: string

Returns void

maxValue

Section titled "maxValue" 
get maxValue(): string | Date

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:372

Returns string | Date

The maximum value the picker will accept.

 
set maxValue(value: string | Date): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:367

Example

<igx-date-picker [maxValue]="maxDate"></igx-date-picker>

Parameters

  • value: string | Date

Returns void

minValue

Section titled "minValue" 
get minValue(): string | Date

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:356

Returns string | Date

The minimum value the picker will accept.

 
set minValue(value: string | Date): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:351

Example

<igx-date-picker [minValue]="minDate"></igx-date-picker>

Parameters

  • value: string | Date

Returns void

specialDates

Section titled "specialDates"

Gets/Sets the special dates descriptors.

 
get specialDates(): DateRangeDescriptor[]

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:301

Example

let specialDates = this.datepicker.specialDates;
this.datePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ];

Returns DateRangeDescriptor[] 

set specialDates(value: DateRangeDescriptor[]): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:304

Parameters

Returns void

type

Section titled "type"

Inherited from: PickerBaseDirective

Determines how the picker's input will be styled.

 
set type(val: IgxInputGroupType): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:218

Example

<igx-date-picker [type]="'line'"></igx-date-picker>

Parameters

Returns void

value

Section titled "value"

Gets/Sets the selected date.

 
get value(): string | Date

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:331

Example

<igx-date-picker [value]="date"></igx-date-picker>

Returns string | Date 

set value(date: string | Date): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:334

Parameters

  • date: string | Date

Returns void

weekStart

Section titled "weekStart"

Inherited from: PickerBaseDirective

Gets the start day of the week. Can return a numeric or an enum representation of the week day. If not set, defaults to the first day of the week for the application locale.

 
get weekStart(): number

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:176

Returns number

Sets the start day of the week. Can be assigned to a numeric value or to WEEKDAYS enum value.

 
set weekStart(value: number): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts:184

Parameters

  • value: number

Returns void

Methods

Section titled "Methods"

clear

Section titled "clear"

Clears the input field and the picker's value.

 
clear(): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:669

Returns void

Example

this.datePicker.clear();

close

Section titled "close"

Closes the picker's dropdown or dialog.

 
close(): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:620

Returns void

Example

<igx-date-picker #picker></igx-date-picker>

<button type="button" igxButton (click)="picker.close()">Close Dialog</button>

decrement

Section titled "decrement"

Decrement a specified DatePart

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

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:700

Parameters

  • datePart: DatePart

    The optional DatePart to decrement. Defaults to Date.
  • delta: number

    The optional delta to decrement by. Overrides spinDelta.

Returns void

Example

this.datePicker.decrement(DatePart.Date);

increment

Section titled "increment"

Increment a specified DatePart.

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

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:686

Parameters

  • datePart: DatePart

    The optional DatePart to increment. Defaults to Date.
  • delta: number

    The optional delta to increment by. Overrides spinDelta.

Returns void

Example

this.datePicker.increment(DatePart.Date);

open

Section titled "open"

Opens the picker's dropdown or dialog.

 
open(settings: OverlaySettings): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:571

Parameters

Returns void

Example

<igx-date-picker #picker></igx-date-picker>

<button type="button" igxButton (click)="picker.open()">Open Dialog</button>

select

Section titled "select"

Selects a date.

 
select(value: Date): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:637

Parameters

  • value: Date

Returns void

Example

this.datePicker.select(date);

selectToday

Section titled "selectToday"

Selects today's date and closes the picker.

 
selectToday(): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:651

Returns void

Example

<igx-date-picker #picker></igx-date-picker>

<button type="button" igxButton (click)="picker.selectToday()">Select Today</button>

toggle

Section titled "toggle"

Toggles the picker's dropdown or dialog

 
toggle(settings: OverlaySettings): void

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:602

Parameters

Returns void

Example

<igx-date-picker #picker></igx-date-picker>

<button type="button" igxButton (click)="picker.toggle()">Toggle Dialog</button>