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

Warning

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.

Usage

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';

@NgModule({
    ...
    imports: [..., IgxDatePickerModule],
    ...
})
export class AppModule {}

Then in our template we place the date picker:

<igx-datePicker></igx-datePicker>

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(Date.now());

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(Date.now());

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:

Internationalization

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.day.combined }}{{ format.weekday.combined }}
  </ng-template>
  <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>
  </ng-template>
</igx-datePicker>
Note

Keep in mind that for Internet Explorer and Edge browsers the date parts will be empty strings, because both browsers don't implement the Intl API providing this functionality. (See formatToParts)

To support those browsers we are going to use alternative template using ngIf directive:

<!-- app.component.html-->
<igx-datePicker id="date-picker" locale="ja-JP" [value]="date" #component>
    <div *ngIf="formatParts; else parseTemplate">
        <ng-template igxCalendarHeader let-format>
            {{ format.month.combined | titlecase }} {{ format.day.combined }} {{ format.weekday.combined }}
        </ng-template>
        <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>
        </ng-template>
    </div>

    <!-- Parse template for browsers not supporting Intl-->
    <ng-template #parseTemplate>
        <ng-template igxCalendarHeader let-format>
            {{ getDatePart(format, component, 'month') | titlecase }} {{ getDatePart(format, component, 'day') }} {{ getDatePart(format, component, 'weekday') }}
        </ng-template>
        <ng-template igxCalendarSubheader let-format>
            <span class="date__el" (click)="format.yearView()">{{ getDatePart(format, component, 'year') }}</span>
            <span class="date__el" (click)="format.monthView()">{{ getDatePart(format, component, 'month') }}</span>
        </ng-template>
    </ng-template>
</igx-datePicker>

Note that ngIf evaluates the value of the formatParts expression to control which template to use. Let's have a look at the alernative #parseTemplate template: the expressions in the curly brackets invokes the getDatePart method that returns the evaluated value, in our case this is a formatted date part (year, weekday, month, etc.). The parameters passed to the getDatePart are necessary so that formatting is based on the IgxDatePickerComponent locale and format options:

// app.component.ts
public intlDateTimeFormat = new Intl.DateTimeFormat() as any;
public formatParts: boolean = this.intlDateTimeFormat.formatToParts;

public getDatePart(val: any, component: any, datePart: string) {
    const date = val.date as Date;
    const locale = component.locale;
    const formatOptions: Intl.DateTimeFormatOptions = {};
    formatOptions[datePart] = component.formatOptions[datePart];

    return date.toLocaleString(locale, formatOptions);

    // instead of toLocaleString we can use Intl.DateTimeFormat.format as well:
    // const partFormatter = new Intl.DateTimeFormat(locale, formatOptions);
    // return partFormatter.format(date);
}

The result is as follows:

API

Inputs

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.
label string Changes the default text label.
labelVisibility string Hide/Show the label.

Outputs

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.
onClose datePicker Emitted when a datePicker calendar is being closed.

Methods

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.