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

Hierarchy

  • PickerBaseDirective
    • IgxDatePickerComponent

Implements

  • ControlValueAccessor
  • Validator
  • OnInit
  • AfterViewInit
  • OnDestroy
  • AfterViewChecked
  • AfterContentChecked

Constructors

Properties

calendarFormat: IFormattingOptions

Gets/Sets the format options of the IgxDatePickerComponent.

Example

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

Gets/Sets the cancel button's label.

Example

<igx-date-picker cancelButtonLabel="Cancel"></igx-date-picker>
closed: EventEmitter<IBaseEventArgs> = ...

Emitted after the calendar has closed.

Example

<igx-date-picker (closed)="handleClosed($event)"></igx-date-picker>
closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted when the calendar has started closing, cancelable.

Example

<igx-date-picker (closing)="handleClosing($event)"></igx-date-picker>
densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
disabled: boolean = false

Enables or disables the picker.

Example

<igx-date-picker [disabled]="'true'"></igx-date-picker>
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: 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: ElementRef<any>
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: ((val) => string)

Type declaration

    • (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>
      

      Parameters

      • val: Date

      Returns string

headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal

Gets/Sets the orientation of the IgxDatePickerComponent header.

Example

<igx-date-picker headerOrientation="vertical"></igx-date-picker>
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: 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: 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: 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: EventEmitter<IBaseEventArgs> = ...

Emitted after the calendar has opened.

Example

<igx-date-picker (opened)="handleOpened($event)"></igx-date-picker>
opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

Emitted when the calendar has started opening, cancelable.

Example

<igx-date-picker (opening)="handleOpening($event)"></igx-date-picker>
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

Overlay settings used to display the pop-up element.

Example

<igx-date-picker [overlaySettings]="customOverlaySettings"></igx-date-picker>
placeholder: string = ''

Sets the placeholder of the picker's input.

Example

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

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

showWeekNumbers: boolean

Show/hide week numbers

Example

<igx-date-picker [showWeekNumbers]="true"></igx-date-picker>
``
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: boolean = true

Specify if the currently spun date segment should loop over.

Example

<igx-date-picker [spinLoop]="false"></igx-date-picker>
tabIndex: string | number

Gets/Sets the default template editor's tabindex.

Example

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

Gets/Sets the today button's label.

Example

<igx-date-picker todayButtonLabel="Today"></igx-date-picker>
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: 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

Methods

  • 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))"