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 Keywords: datepicker, calendar, schedule, date
Igx Group: Scheduling

Example

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

Constructors

new IgxDatePickerComponent(): IgxDatePickerComponent

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

Returns IgxDatePickerComponent

Properties

calendarFormat

Gets/Sets the format options of the IgxDatePickerComponent.

calendarFormat: IFormattingOptions

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

Example

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

cancelButtonLabel

Gets/Sets the cancel button's label.

cancelButtonLabel: string

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

Example

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

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

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

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

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

Remarks

Default value is 1.

Example

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

element

Inherited from: PickerBaseDirective

element: ElementRef<any>

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

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

Example

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

formatViews

Gets/Sets the format views of the IgxDatePickerComponent.

formatViews: IFormattingViews

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

Example

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

headerOrientation

Inherited from: PickerBaseDirective

Gets/Sets the orientation of the IgxDatePickerComponent 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

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

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

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

Gets/Sets the value of id attribute.

id: string

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

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

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

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

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

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

Example

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

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

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

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

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

showWeekNumbers

Show/hide week numbers

showWeekNumbers: boolean

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

Example

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

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

Example

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

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

Example

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

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

Gets/Sets the today button's label.

todayButtonLabel: string

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

Example

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

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

Example

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

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

Remarks

Used for two-way bindings.

Example

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

activeDate

activeDate: Date

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:179, projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:185

disabledDates

disabledDates: DateRangeDescriptor[]

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:282, projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:285

displayFormat

Inherited from: PickerBaseDirective

displayFormat: string

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

inputFormat

Inherited from: PickerBaseDirective

inputFormat: string

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

locale

Inherited from: PickerBaseDirective

locale: string

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

maxValue

maxValue: string | Date

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:366, projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:371

minValue

minValue: string | Date

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:350, projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:355

specialDates

specialDates: DateRangeDescriptor[]

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:300, projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:303

type

Inherited from: PickerBaseDirective

type: IgxInputGroupType

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

value

value: string | Date

Defined in projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:330, projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts:333

weekStart

Inherited from: PickerBaseDirective

weekStart: number

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

Accessors

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

Methods

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

Returns void

Example

this.datePicker.clear();

close

Closes the picker's dropdown or dialog.

close(): void

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

Returns void

Example

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

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

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

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

Increment a specified DatePart.

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

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

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

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

Parameters

settings: OverlaySettings

Returns void

Example

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

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

select

Selects a date.

select(value: Date): void

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

Parameters

value: Date

Returns void

Example

this.datePicker.select(date);

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

Returns void

Example

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

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

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

Parameters

settings: OverlaySettings

Returns void

Example

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

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