Class IgxDatePickerComponent

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 Group

Scheduling

Igx Keywords

datepicker, calendar, schedule, date

Example

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

Hierarchy

PickerBaseDirective
- IgxDatePickerComponent

Implements

ControlValueAccessor
Validator
OnInit
AfterViewInit
OnDestroy
AfterViewChecked
AfterContentChecked

Constructors

constructor

new IgxDatePickerComponent(element, _localeId, _overlayService, _injector, _renderer, platform, cdr, _displayDensityOptions?, _inputGroupType?): IgxDatePickerComponent
Overrides PickerBaseDirective.constructor
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:510
Parameters
- element: ElementRef<HTMLElement>
- _localeId: string
- _overlayService: IgxOverlayService
- _injector: Injector
- _renderer: Renderer2
- platform: PlatformUtil
- cdr: ChangeDetectorRef
- Optional _displayDensityOptions: IDisplayDensityOptions
- Optional _inputGroupType: IgxInputGroupType
Returns IgxDatePickerComponent

Properties

calendarFormat

calendarFormat: IFormattingOptions

Gets/Sets the format options of the IgxDatePickerComponent.

Example

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

cancelButtonLabel

cancelButtonLabel: string

Gets/Sets the cancel button's label.

Example

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

closed

closed: EventEmitter<IBaseEventArgs> = ...

Emitted after the calendar has closed.

Example

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

closing

closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted when the calendar has started closing, cancelable.

Example

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

densityChanged

densityChanged: EventEmitter<IDensityChangedEventArgs> = ...

disabled

disabled: boolean = false

Enables or disables the picker.

Example

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

displayFormat

displayFormat: string

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

Remarks

Uses Angular's DatePipe.

Example

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

displayMonthsCount

displayMonthsCount: number = 1

Gets/Sets the number of month views displayed.

Remarks

Default value is 1.

Example

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

Example

let monthViewsDisplayed = this.datePicker.displayMonthsCount;

element

element: ElementRef<any>

formatViews

formatViews: IFormattingViews

Gets/Sets the format views of the IgxDatePickerComponent.

Example

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

formatter

formatter: ((val) => string)

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

Example

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

Type declaration

- (val): string
- Parameters
  - val: Date
  Returns string

headerOrientation

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

Gets/Sets the orientation of the IgxDatePickerComponent header.

Example

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

hideOutsideDays

hideOutsideDays: boolean

Gets/Sets whether the inactive dates will be hidden.

Remarks

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

Example

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

Example

let hideOutsideDays = this.datePicker.hideOutsideDays;

id

id: string = ...

Gets/Sets the value of id attribute.

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>

inputFormat

inputFormat: string

The editor's input mask.

Remarks

Also used as a placeholder when none is provided. Default is "'MM/dd/yyyy'"

Example

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

mode

mode: PickerInteractionMode = PickerInteractionMode.DropDown

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

Remarks

Default mode is dropdown

Example

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

opened

opened: EventEmitter<IBaseEventArgs> = ...

Emitted after the calendar has opened.

Example

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

opening

opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted when the calendar has started opening, cancelable.

Example

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

outlet

outlet: ElementRef<any> | IgxOverlayOutletDirective

Gets/Sets the container used for the popup element.

Remarks

outlet is an instance of IgxOverlayOutletDirective or an ElementRef.

Example

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

overlaySettings

overlaySettings: OverlaySettings

Overlay settings used to display the pop-up element.

Example

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

placeholder

placeholder: string = ''

Sets the placeholder of the picker's input.

Example

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

resourceStrings

resourceStrings: IDatePickerResourceStrings

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

showWeekNumbers

showWeekNumbers: boolean

Show/hide week numbers

Example

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

spinDelta

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

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

Example

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

spinLoop

spinLoop: boolean = true

Specify if the currently spun date segment should loop over.

Example

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

tabIndex

tabIndex: string | number

Gets/Sets the default template editor's tabindex.

Example

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

todayButtonLabel

todayButtonLabel: string

Gets/Sets the today button's label.

Example

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

validationFailed

validationFailed: EventEmitter<IDatePickerValidationFailedEventArgs> = ...

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

Example

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

valueChange

valueChange: EventEmitter<Date> = ...

Emitted when the picker's value changes.

Remarks

Used for two-way bindings.

Example

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

Accessors

collapsed

get collapsed(): boolean
Inherited from PickerBaseDirective.collapsed
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:268
Gets the picker's pop-up state.
Example
```
const state = this.picker.collapsed;
```
Returns boolean

disabledDates

get disabledDates(): DateRangeDescriptor[]
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:278
Gets/Sets the disabled dates descriptors.
Example
```
let disabledDates = this.datepicker.disabledDates;
this.datePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...];
```
Returns DateRangeDescriptor[]
set disabledDates(value): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:281
Parameters
- value: DateRangeDescriptor[]
Returns void

displayDensity

get displayDensity(): DisplayDensity
Inherited from PickerBaseDirective.displayDensity
- Defined in projects/igniteui-angular/src/lib/core/density.ts:85
Returns the theme of the component. The default theme is comfortable. Available options are comfortable, cosy, compact.
```
let componentTheme = this.component.displayDensity;
```
Deprecated
since version 16.1.0. Please use the --ig-size CSS custom property.

See
Update Guide

Returns DisplayDensity
set displayDensity(val): void
Inherited from PickerBaseDirective.displayDensity
- Defined in projects/igniteui-angular/src/lib/core/density.ts:96
Sets the theme of the component.

Parameters
- val: DisplayDensity
Returns void

locale

get locale(): string
Inherited from PickerBaseDirective.locale
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:116
Gets the locale of the date-picker. If not set, defaults to applciation's locale..

Returns string
set locale(value): void
Inherited from PickerBaseDirective.locale
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:124
Sets the locale of the date-picker. Expects a valid BCP 47 language tag.

Parameters
- value: string
Returns void

maxValue

get maxValue(): string | Date
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:367
Returns string | Date
set maxValue(value): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:362
The maximum value the picker will accept.
Example
```
<igx-date-picker [maxValue]="maxDate"></igx-date-picker>
```
Parameters
- value: string | Date
Returns void

minValue

get minValue(): string | Date
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:351
Returns string | Date
set minValue(value): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:346
The minimum value the picker will accept.
Example
```
<igx-date-picker [minValue]="minDate"></igx-date-picker>
```
Parameters
- value: string | Date
Returns void

specialDates

get specialDates(): DateRangeDescriptor[]
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:296
Gets/Sets the special dates descriptors.
Example
```
let specialDates = this.datepicker.specialDates;
this.datePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ];
```
Returns DateRangeDescriptor[]
set specialDates(value): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:299
Parameters
- value: DateRangeDescriptor[]
Returns void

type

get type(): IgxInputGroupType
Inherited from PickerBaseDirective.type
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:181
Returns IgxInputGroupType
set type(val): void
Inherited from PickerBaseDirective.type
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:178
Determines how the picker's input will be styled.
Remarks
Default is box.

Example
```
<igx-date-picker [type]="'line'"></igx-date-picker>
```
Parameters
- val: IgxInputGroupType
Returns void

value

get value(): string | Date
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:326
Gets/Sets the selected date.
Example
```
<igx-date-picker [value]="date"></igx-date-picker>
```
Returns string | Date
set value(date): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:329
Parameters
- date: string | Date
Returns void

weekStart

get weekStart(): number
Inherited from PickerBaseDirective.weekStart
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:140
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.

Returns number
set weekStart(value): void
Inherited from PickerBaseDirective.weekStart
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:148
Sets the start day of the week. Can be assigned to a numeric value or to WEEKDAYS enum value.

Parameters
- value: number
Returns void

Methods

clear

clear(): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:668
Clears the input field and the picker's value.
Example
```
this.datePicker.clear();
```
Returns void

close

close(): void
Overrides PickerBaseDirective.close
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:619
Closes the picker's dropdown or dialog.
Example
```
<igx-date-picker #picker></igx-date-picker>

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

decrement

decrement(datePart?, delta?): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:699
Decrement a specified DatePart
Example
```
this.datePicker.decrement(DatePart.Date);
```
Parameters
- Optional datePart: DatePart
  The optional DatePart to decrement. Defaults to Date.
- Optional delta: number
  The optional delta to decrement by. Overrides spinDelta.
Returns void

getComponentSizeStyles

getComponentSizeStyles(): "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"
Inherited from PickerBaseDirective.getComponentSizeStyles
- Defined in projects/igniteui-angular/src/lib/core/density.ts:197
Sets the --component-size CSS variable based on the value of Display Density

Returns "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"

increment

increment(datePart?, delta?): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:685
Increment a specified DatePart.
Example
```
this.datePicker.increment(DatePart.Date);
```
Parameters
- Optional datePart: DatePart
  The optional DatePart to increment. Defaults to Date.
- Optional delta: number
  The optional delta to increment by. Overrides spinDelta.
Returns void

open

open(settings?): void
Overrides PickerBaseDirective.open
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:570
Opens the picker's dropdown or dialog.
Example
```
<igx-date-picker #picker></igx-date-picker>

<button type="button" igxButton (click)="picker.open()">Open Dialog</button>
```
Parameters
- Optional settings: OverlaySettings
Returns void

select

select(value): void
Overrides PickerBaseDirective.select
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:636
Selects a date.
Remarks
Updates the value in the input field.

Example
```
this.datePicker.select(date);
```
Parameters
- value: Date
Returns void

selectToday

selectToday(): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:650
Selects today's date and closes the picker.
Example
```
<igx-date-picker #picker></igx-date-picker>

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

toggle

toggle(settings?): void
Overrides PickerBaseDirective.toggle
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:601
Toggles the picker's dropdown or dialog
Example
```
<igx-date-picker #picker></igx-date-picker>

<button type="button" igxButton (click)="picker.toggle()">Toggle Dialog</button>
```
Parameters
- Optional settings: OverlaySettings
Returns void

Class IgxDatePickerComponent

Igx Module

Igx Theme

Igx Group

Igx Keywords

Example

Hierarchy

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

element: ElementRef<HTMLElement>

_localeId: string

_overlayService: IgxOverlayService

_injector: Injector

_renderer: Renderer2

platform: PlatformUtil

cdr: ChangeDetectorRef

Optional _displayDensityOptions: IDisplayDensityOptions

Optional _inputGroupType: IgxInputGroupType

Returns IgxDatePickerComponent

Properties

calendarFormat

Example

cancelButtonLabel

Example

closed

Example

closing

Example

densityChanged

disabled

Example

displayFormat

Remarks

Example

displayMonthsCount

Remarks

Example

Example

element

formatViews

Example

formatter

Example

Type declaration

Parameters

val: Date

Returns string

headerOrientation

Example

hideOutsideDays

Remarks

Example

Example

id

Remarks

Example

inputFormat

Remarks

Example

mode

Remarks

Example

opened

Example

opening

Example

outlet

Remarks

Example

overlaySettings

Example

placeholder

Example