Class IgxDatePickerComponent

Date Picker displays a popup calendar that lets users select a single date.

@igxmodule: IgxDatePickerModule
@igxtheme: igx-calendar-theme, igx-icon-theme
@igxgroup: Scheduling
@igxkeywords: datepicker, calendar, schedule, date
@example: <igx-date-picker [(ngModel)]="selectedDate"></igx-date-picker>

Hierarchy

IgxDatePickerComponent

Implements

IDatePicker
ControlValueAccessor
EditorProvider
OnInit
AfterViewInit
OnDestroy
AfterViewChecked

Constructors

constructor

Accessors

Methods

Constructors

constructor

new IgxDatePickerComponent(_overlayService: IgxOverlayService, element: ElementRef, _cdr: ChangeDetectorRef, _moduleRef: NgModuleRef<any>, _injector: Injector, _renderer: Renderer2): IgxDatePickerComponent

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:387
Parameters
- _overlayService: IgxOverlayService
- element: ElementRef
- _cdr: ChangeDetectorRef
- _moduleRef: NgModuleRef<any>
- _injector: Injector
- _renderer: Renderer2
Returns IgxDatePickerComponent

Properties

cancelButtonLabel

cancelButtonLabel: string

*Gets/Sets the cancel button's label.

@example: <igx-date-picker cancelButtonLabel="Close" todayButtonLabel="Today"></igx-date-picker>

disabled

disabled: boolean

Enables/Disables the IgxDatePickerComponent.

@example: <igx-date-picker [disabled]="'true'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>

element

element: ElementRef

formatter

formatter: function

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: Date): string
- Parameters
  - val: Date
  Returns string

hideOutsideDays

hideOutsideDays: boolean

Gets/Sets whether the inactive dates will be hidden.

@remarks: Apllies 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 = `igx-date-picker-${NEXT_ID++}`

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>

isSpinLoop

isSpinLoop: boolean = true

Gets/Sets whether date should spin continuously or stop when min/max is reached.

@example: <igx-date-picker [isSpinLoop]="false"></igx-date-picker>

label

label: string = "Date"

Gets/Sets the IgxDatePickerComponent label.

@remarks: The default label is 'Date'.
@example: <igx-date-picker [label]="Calendar"></igx-date-picker>

labelVisibility

labelVisibility: boolean = true

Gets/Sets the IgxDatePickerComponent label visibility.

@remarks: By default the visibility is set to true.
@example: <igx-date-picker [labelVisibility]="false">

locale

locale: "en"

Gets/Sets the locales.

@remarks: Default locale is en.
@example: <igx-date-picker locale="ja-JP" [value]="date"></igx-date-picker>

mask

mask: string

Gets/Sets the date mask of the IgxDatePickerComponent when in editable dropdown mode.

@example: let mask = this.datePicker.mask;

mode

mode: InteractionMode = InteractionMode.Dialog

Gets/Sets the interaction mode - dialog or drop down.

@example: <igx-date-picker mode="dropdown"></igx-date-picker>

monthsViewNumber

monthsViewNumber: number = 1

Gets/Sets the number of month views displayed.

@remarks: Default value is 1.
@example: <igx-date-picker [monthsViewNumber]="2"></igx-date-picker>
@example: let monthViewsDisplayed = this.datePicker.monthsViewNumber;

onClosed

onClosed: EventEmitter<IgxDatePickerComponent> = new EventEmitter<IgxDatePickerComponent>()

Emitted after the IgxDatePickerComponent is closed.

onClosing

onClosing: EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs> = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>()

Emitted when the IgxDatePickerComponent is being closed.

onDisabledDate

onDisabledDate: EventEmitter<IDatePickerDisabledDateEventArgs> = new EventEmitter<IDatePickerDisabledDateEventArgs>()

Emitted when the user types/spins to a disabled date in the date-picker editor.

@example: <igx-date-picker (onDisabledDate)="onDisabledDate($event)"></igx-date-picker>

onOpened

onOpened: EventEmitter<IgxDatePickerComponent> = new EventEmitter<IgxDatePickerComponent>()

Emitted when the IgxDatePickerComponent calendar is opened.

onSelection

onSelection: EventEmitter<Date> = new EventEmitter<Date>()

Emitted when selection is made in the calendar.

@example: <igx-date-picker (onSelection)="selection($event)"></igx-date-picker>

onValidationFailed

onValidationFailed: EventEmitter<IDatePickerValidationFailedEventArgs> = new EventEmitter<IDatePickerValidationFailedEventArgs>()

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

@example: <igx-date-picker (onValidationFailed)="onValidationFailed($event)"></igx-date-picker>

outlet

outlet: IgxOverlayOutletDirective | ElementRef

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

todayButtonLabel

todayButtonLabel: string

Gets/Sets the today button's label.

@example: <igx-date-picker cancelButtonLabel="cancel" todayButtonLabel="Tomorrow"></igx-date-picker>

valueChange

valueChange: EventEmitter<Date> = new EventEmitter<Date>()

Emitted when date picker value is changed.

@example: <igx-date-picker (valueChange)="valueChanged($event)" mode="dropdown"></igx-date-picker>

vertical

vertical: boolean = false

Gets/Sets the orientation of the IgxDatePickerComponent header.

@example: <igx-date-picker [vertical]="'true'" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>

weekStart

weekStart: WEEKDAYS | number = WEEKDAYS.SUNDAY

Gets/Sets on which day the week starts.

@example: <igx-date-picker [weekStart]="WEEKDAYS.FRIDAY" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>

Accessors

context

get context(): object

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:416
Gets the context passed to the input group template.

Returns object
- disabled: boolean
- disabledDates: DateRangeDescriptor[]
- displayData: string
- format: string
- isSpinLoop: boolean
- label: string
- labelVisibility: boolean
- locale: "en"
- mask: string
- mode: InteractionMode
- specialDates: DateRangeDescriptor[]
- value: Date
- openDialog: function
  - openDialog(): void
  - - Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:430
    Returns void

disabledDates

get disabledDates(): DateRangeDescriptor[]
set disabledDates(value: DateRangeDescriptor[]): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:311
Gets/Sets the disabled dates descriptors.
@example
let disabledDates = this.datepicker.disabledDates; this.datePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...];
Returns DateRangeDescriptor[]
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:314
Gets/Sets the disabled dates descriptors.
@example
let disabledDates = this.datepicker.disabledDates; this.datePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...];
Parameters
- value: DateRangeDescriptor[]
Returns void

displayData

get displayData(): string

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:366
Gets the formatted date when IgxDatePickerComponent is in dialog mode.
@example
let selectedDate = this.datePicker.displayData;
Returns string

dropDownOverlaySettings

get dropDownOverlaySettings(): OverlaySettings
set dropDownOverlaySettings(value: OverlaySettings): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:351
Gets/Sets the drop-down overlay settings.

Returns OverlaySettings
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:355
Gets/Sets the drop-down overlay settings.

Parameters
- value: OverlaySettings
Returns void

format

get format(): string
set format(format: string): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:268
Gets/Sets the date display format of the IgxDatePickerComponent in dropdown mode.
@example
let format = this.datePicker.format; this.datePicker.format = 'yyyy-M-d';
Returns string
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:271
Gets/Sets the date display format of the IgxDatePickerComponent in dropdown mode.
@example
let format = this.datePicker.format; this.datePicker.format = 'yyyy-M-d';
Parameters
- format: string
Returns void

formatOptions

get formatOptions(): IFormatOptions
set formatOptions(formatOptions: IFormatOptions): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:211
Gets the format options of the IgxDatePickerComponent.
@example
let formatOptions = this.datePicker.formatOptions;
Returns IFormatOptions
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:255
Sets the format options of the IgxDatePickerComponent.
@example
this.datePicker.formatOptions = { day: "numeric", month: "long", weekday: "long", year: "numeric"};
Parameters
- formatOptions: IFormatOptions
Returns void

formatViews

get formatViews(): IFormatViews
set formatViews(formatViews: IFormatViews): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:294
Gets/Sets the format views of the IgxDatePickerComponent.
@example
let formatViews = this.datePicker.formatViews; this.datePicker.formatViews = {day:false, month: false, year:false};
Returns IFormatViews
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:298
Gets/Sets the format views of the IgxDatePickerComponent.
@example
let formatViews = this.datePicker.formatViews; this.datePicker.formatViews = {day:false, month: false, year:false};
Parameters
- formatViews: IFormatViews
Returns void

modalOverlaySettings

get modalOverlaySettings(): OverlaySettings
set modalOverlaySettings(value: OverlaySettings): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:339
Gets/Sets the modal overlay settings.

Returns OverlaySettings
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:343
Gets/Sets the modal overlay settings.

Parameters
- value: OverlaySettings
Returns void

specialDates

get specialDates(): DateRangeDescriptor[]
set specialDates(value: DateRangeDescriptor[]): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:328
Gets/Sets the special dates descriptors.
@example
let specialDates = this.datepicker.specialDates; this.datePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ];
Returns DateRangeDescriptor[]
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:331
Gets/Sets the special dates descriptors.
@example
let specialDates = this.datepicker.specialDates; this.datePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ];
Parameters
- value: DateRangeDescriptor[]
Returns void

template

get template(): TemplateRef<any>

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:406
Gets the input group template.
@example
let template = this.template();
Returns TemplateRef<any>

value

get value(): Date
set value(date: Date): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:453
Gets/Sets the selected date.
@example
<igx-date-picker [value]="date"></igx-date-picker>
Returns Date
- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:457
Gets/Sets the selected date.
@example
<igx-date-picker [value]="date"></igx-date-picker>
Parameters
- date: Date
Returns void

Methods

_updateValidityOnBlur

_updateValidityOnBlur(): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:1359
Returns void

deselectDate

deselectDate(): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:993
Deselects the calendar date.
@example
this.datePicker.deselectDate();
Returns void

ngAfterViewChecked

ngAfterViewChecked(): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:911
Returns void

openDialog

openDialog(): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:1010
Opens the date picker drop down or dialog.
@example
this.datePicker.openDialog(target);
Returns void

selectDate

selectDate(date: Date): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:978
Change the calendar selection.
@remarks

Calling this method will emit the @calendar.onSelection event, which will fire @handleSelection method.
@example
this.datePicker.selectDate(this.date);
Parameters
- date: Date
  
  passed date that has to be set to the calendar.
Returns void

triggerTodaySelection

triggerTodaySelection(): void

- Defined in projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts:962
Selects today's date from calendar.
@remarks

Changes the input field value, @calendar.viewDate and @calendar.value.
@example
this.datePicker.triggerTodaySelection();
Returns void

Class IgxDatePickerComponent

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

_overlayService: IgxOverlayService

element: ElementRef

_cdr: ChangeDetectorRef

_moduleRef: NgModuleRef<any>

_injector: Injector

_renderer: Renderer2

Returns IgxDatePickerComponent

Properties

cancelButtonLabel

disabled

element

formatter

Type declaration

Parameters

val: Date

Returns string

hideOutsideDays

id

isSpinLoop

label

labelVisibility

locale

mask

mode

monthsViewNumber

onClosed

onClosing

onDisabledDate

onOpened

onSelection

onValidationFailed

outlet

todayButtonLabel

valueChange

vertical

weekStart

Accessors

context

Returns object

disabled: boolean

disabledDates: DateRangeDescriptor[]

displayData: string

format: string

isSpinLoop: boolean

label: string

labelVisibility: boolean

locale: "en"

mask: string

mode: InteractionMode

specialDates: DateRangeDescriptor[]

value: Date

openDialog: function

Returns void

disabledDates

Returns DateRangeDescriptor[]

Parameters

value: DateRangeDescriptor[]

Returns void

displayData

Returns string

dropDownOverlaySettings

Returns OverlaySettings

Parameters

value: OverlaySettings

Returns void

format

Returns string

Parameters

format: string

Returns void