Month Picker

The Ignite UI for Angular Month Picker component provides an easy and intuitive way to select a specific month and year using a month-year calendar view. The component allows single selection, customizable display format and supports localization.

Month Picker Demo

Note

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

To get started with the Ignite UI for Angular Month Picker, let's first import the IgxCalendarModule in the application's AppModule, typically this is the app.module.ts file. Note that the IgxCalendar is also dependent on the BrowserAnimationsModule, so it needs to be added to the AppModule as well:

// app.module.ts
...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular';
@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, IgxCalendarModule],
    ...
})
export class AppModule {}

You will usually also import the IgxMonthPickerComponent in the AppComponent file (or your editor will auto-import them for you) when declaring types that are part of the month picker API:

import { IgxMonthPickerComponent } from "igniteui-angular";
...

@ViewChild('monthPicker', { read: IgxMonthPickerComponent }) public monthPicker: IgxMonthPickerComponent;
Note

Note that the IgxMonthPickerComponent uses the Intl WebAPI for localization and formatting of dates. Consider using the appropriate polyfills if your target platform does not support them.

To add a month picker in a template, use the following code:

<!-- month-picker-sample.component.html -->

<igx-month-picker></igx-month-picker>

Setting date

Set a date to IgxMonthPickerComponent using the value input.

// month-picker-sample.component.ts

public date: Date = new Date(Date.now());
<!-- month-picker-sample.component.html -->

<igx-month-picker [value]="date"></igx-date-picker>

To create a two-way data-binding, set ngModel like this:

<!-- month-picker-sample.component.html -->

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

Formatting

Change the month picker display format, using the formatOptions inputs.

<!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [formatOptions]="numericFormatOptions"></igx-month-picker>
// month-picker-sample.component.ts

public date: Date = new Date(Date.now());
public numericFormatOptions = {
        month: "2-digit",
        year: "numeric"
};

Here is an example of modifying the default format options of the month picker:

Localization

Use the locale input, to customize the month picker localization.

<!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [locale]="locale" [formatOptions]="formatOptions"></igx-month-picker>
// month-picker-sample.component.ts

public date: Date = new Date(Date.now());
public locale: "fr";
public formatOptions = {
        month: "long",
        year: "numeric"
};

Here is an example of localizing the month picker component:

Keyboard navigation

  • When the igxMonthPicker component is focused, use

    • PageUp key to move to the previous year,
    • PageDown key to move to the next year,
    • Home key to focus the first month of the current year,
    • End key to focus the last month of the current year,
    • Tab key to navigate through the sub-header buttons.
  • When < (previous) or > (next) year button (in the sub-header) is focused, use

    • Space or Enter key to scroll into view the next or previous year.
  • When years button (in the sub-header) is focused, use

    • Space or Enter key to open the years view,
    • Right or Left arrow key to scroll the previous/next year into view.
  • When a month inside the months view is focused, use

    • Arrow keys to navigate through the months,
    • Home key to focus the first month inside the months view,
    • End key to focus the last month inside the months view,
    • Enter key to select the currently focused month and close the view,
    • Tab key to navigate through the months.

API References

Additional Resources

Our community is active and always welcoming to new ideas.