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, _inputGroupType?): IgxDatePickerComponent
Overrides PickerBaseDirective.constructor
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:509
Parameters
- element: ElementRef<HTMLElement>
- _localeId: string
- _overlayService: IgxOverlayService
- _injector: Injector
- _renderer: Renderer2
- platform: PlatformUtil
- cdr: ChangeDetectorRef
- _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>

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: Date) => 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:267
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:277
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:280
Parameters
- value: DateRangeDescriptor[]
Returns void

locale

get locale(): string
Inherited from PickerBaseDirective.locale
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:115
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:123
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:366
Returns string | Date
set maxValue(value): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:361
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:350
Returns string | Date
set minValue(value): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:345
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:295
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:298
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:180
Returns IgxInputGroupType
set type(val): void
Inherited from PickerBaseDirective.type
- Defined in projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts:177
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:325
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:328
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:139
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:147
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:666
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:617
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:697
Decrement a specified DatePart
Example
```
this.datePicker.decrement(DatePart.Date);
```
Parameters
- datePart: DatePart
  The optional DatePart to decrement. Defaults to Date.
- delta: number
  The optional delta to decrement by. Overrides spinDelta.
Returns void

increment

increment(datePart?, delta?): void
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:683
Increment a specified DatePart.
Example
```
this.datePicker.increment(DatePart.Date);
```
Parameters
- datePart: DatePart
  The optional DatePart to increment. Defaults to Date.
- 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:568
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
- settings: OverlaySettings
Returns void

select

select(value): void
Overrides PickerBaseDirective.select
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:634
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:648
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:599
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
- 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

_inputGroupType: IgxInputGroupType

Returns IgxDatePickerComponent

Properties

calendarFormat

Example

cancelButtonLabel

Example

closed

Example

closing

Example

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

resourceStrings

showWeekNumbers