Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

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

  • PickerBaseDirective
    • IgxDatePickerComponent

Implements

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

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

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<HTMLElement>

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

Type declaration

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

      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>

locale

locale: string

Locale settings used for value formatting and calendar or time spinner.

remarks

Uses Angular's LOCALE_ID by default. Affects both input mask and display format if those are not set. If a locale is set, it must be registered via registerLocaleData. Please refer to https://angular.io/guide/i18n#i18n-pipes. If it is not registered, Intl will be used for formatting.

example
<igx-date-picker locale="jp"></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>

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...

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: IgxOverlayOutletDirective | ElementRef<any>

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, "date" | "month" | "year">

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>

weekStart

weekStart: number = WEEKDAYS.SUNDAY

Gets/Sets on which day the week starts.

example
<igx-date-picker [weekStart]="4" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>

Accessors

collapsed

  • get collapsed(): boolean

disabledDates

displayDensity

maxValue

  • get maxValue(): string | Date
  • set maxValue(value: string | Date): void

minValue

  • get minValue(): string | Date
  • set minValue(value: string | Date): void

specialDates

type

value

  • get value(): string | Date
  • set value(date: string | Date): void

Methods

clear

  • clear(): void

close

  • close(): void

decrement

  • decrement(datePart?: DatePart, delta?: number): void

increment

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

ngDoCheck

  • ngDoCheck(): void

open

select

  • select(value: Date): void

selectToday

  • selectToday(): void

toggle