Date Picker

The Ignite UI for Angular Date Picker component displays a month-view calendar or a pop-up calendar that lets users pick a single date. The control can focus on the current date and has a cancel button.

Date Picker Demo


import { IgxDatePickerComponent } from "igniteui-angular";

Basic initialization


Custom formatter function with passed initial date and locale.

<igx-datePicker [formatter]="customFormatter" [value]="dateValue" [locale]="'en-US'"></igx-datePicker>

Adding Buttons

<igx-datePicker [cancelButtonLabel]="'Close'"[todayButtonLabel]="'Today'"></igx-datePicker>

Disabled state

You also have the ability to disable the datePicker.

<igx-datePicker [isDisabled]="false"></igx-datePicker>


DatePicker with first day of week set to Monday and an event handler when selection is done.

<igx-datePicker [weekStart]="1" (onSelection)="eventHandler($event)"></igx-datePicker>


The DatePicker also supports binding through ngModel if two-way date-binding is needed.

<igx-datePicker [(ngModel)]="myDateValue"></igx-datePicker>



Name Type Description
todayBottonLabel string Renders today button with custom name, which selects today's date from calendar, and fill the datePicker input.
cancelButtonLabel string Renders cancel button with custom name, which closes the calendar.
formatter function Applied custom formatter on the selected or passed date.
isDisabled boolean Disable the datePicker.
weekStart Number \| WEEKDAYS Sets on which day will the week start.
locale string Sets the locale used for formatting and displaying the dates in the calendar. For more information check out this page for valid formats.
formatOptions Object The format options passed along with the locale property used for formatting the dates.


Name Return Type Description
onSelection Date Fired when selection is made in the calendar. The event contains the selected value(s) based on the type of selection the component is set to
onOpen datePicker Emitted when a datePicker calendar is being opened.


Name Arguments Return Type Description
selectDate date: Date void Change the calendar selection. Calling this method will emit the onSelection event.