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. It supports locales and custom date formatting. The component can display a today and cancel buttons.

Date Picker Demo


To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the installation topic.


The IgxDatePickerComponent allows you to pick a date from a calendar. The picker uses the IgxCalendarComponent internally as a calendar. To get started with the Ignite UI for Angular Date Picker, let's first import the IgxDatePickerModule in our app.module.ts file:

// app.module.ts

import { IgxDatePickerModule } from 'igniteui-angular/main';

    imports: [..., IgxDatePickerModule],
export class AppModule {}

Then in our template we place the date picker:


The result is as follows:

Setting date

We could set a date to our IgxDatePickerComponent using the value input. Just add a date:

public date: Date = new Date(;

Then use the value input in the template:

<igx-datePicker [value]="date"></igx-datePicker>

And there we have it:

If we want to use a two-way data-binding, we could just use ngModule like this:

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

Adding buttons

The IgxDatePickerComponent supports a today button which selects the current day from the calendar. Cancel button could be enabled too. Here is how we can enable the buttons in our template:

<igx-datePicker cancelButtonLabel="cancel" todayButtonLabel="today" [(ngModel)]="date"></igx-datePicker>

Here you can see the buttons:

Custom formatting

By default our date will be formatted based on the locale we set. We could use our own formatter though. To achieve this add a formatter function:

public date: Date = new Date(;

private dayFormatter = new Intl.DateTimeFormat("en", { weekday: "long" });
private monthFormatter = new Intl.DateTimeFormat("en", { month: "long" });

public formatter = (date: Date) => {
  return `You selected ${this.dayFormatter.format(date)}, ${date.getDate()} ${this.monthFormatter.format(date)}, ${date.getFullYear()}`;

And then use the formatter input of the IgxDatePickerComponent:

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

Here is the formatted date:


The IgxDatePickerComponent supports locales. You can set them using the locale input. Using the IgxCalendarComponent templates for header (igxCalendarHeader) and subheader (igxCalendarSubheader), you can specify the look of your header and subheader. More information on how to use these templates you can find in the IgxCalendarComponent documentation. Here is how a date picker with Japanese locale definition would look like:

<igx-datePicker locale="ja-JP" [value]="date">
  <ng-template igxCalendarHeader let-format>
    {{ format.month.combined | titlecase }}{{ }}{{ format.weekday.combined }}
  <ng-template igxCalendarSubheader let-format>
    <span class="date__el" (click)="format.yearView()">{{ format.year.combined }}</span>
    <span class="date__el" (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>

The result is as follows:



Name Type Description
value Date Sets the selected date.
todayButtonLabel 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 Disables the datePicker.
weekStart Number \| WEEKDAYS Sets on which day the week starts.
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.
formatViews Object The format views passed along with the locale property used for formatting 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.

Additional Resources

Our community is active and always welcoming to new ideas.