Angular Month Picker Component Overview

    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 you bind it's value to a date object, and users can change the month and year portion of the date object through the month picker component UI. It also supports localization.

    Angular Month Picker Example

    What you see here is a basic Angular Month Picker example with a the component's default view, enabling users to select the year and the month.

    Getting Started with Ignite UI for Angular Month Picker

    To get started with the Ignite UI for Angular Month Picker component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

    The first step is to import the IgxCalendarModule inside our app.module.ts file.

    Note

    The IgxMonthPickerComponent also depends on the BrowserAnimationsModule and the HammerModule for touch interactions, so they need to be added to the AppModule as well:

    // app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
    ...
})
export class AppModule {}

    Alternatively, as of 16.0.0 you can import the IgxMonthPickerComponent as a standalone dependency, or use the IGX_CALENDAR_DIRECTIVES token to import the component and all of its supporting components and directives.

    // home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxMonthPickerComponent } from 'igniteui-angular';
// import { IgxMonthPickerComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-month-picker></igx-month-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IgxMonthPickerComponent]
    /* or imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES] */
})
export class HomeComponent {}

    Now that you have the Ignite UI for Angular Calendar module or Month Picker component imported, you can start using the igx-month-picker component.

    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.

    Using the Angular Month Picker

    To add the Angular 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();

    <!-- 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();
public numericFormatOptions = {
    month: '2-digit'
};

    Localization

    Use the locale input, to customize the Ignite UI for Angular 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();
public locale: 'fr';
public formatOptions = {
    month: 'long'
};

    Here is an example of localizing and formatting 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.

    Styling

    To get started with styling the month picker, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    The month picker uses the calendar's theme, so we have to create a new theme that extends the calendar-theme and use some of its parameters to style the month picker's items:

    $my-calendar-theme: calendar-theme(
  $border-radius: 15px,
  $content-background: #011627,
  $picker-background-color: #011627,
  $month-current-text-color: #ECAA53,
  $month-hover-background: #ECAA53,
  $year-current-text-color: #ECAA53,
  $year-hover-text-color: #D37B08,
  $picker-arrow-color: #ECAA53,
  $picker-text-hover-color: #D37B08,
  $picker-arrow-hover-color: #D37B08,
  $picker-text-color: #ECAA53
);

    Including themes

    The next step is to include the component theme in our application.

    If $legacy-support is set to true, include the component theme like that:

     @include calendar($my-calendar-theme);
    Note

    If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep

    :host {
     ::ng-deep {
        @include calendar($my-calendar-theme);
    }
}

    If $legacy-support is set to false(default), include the component css variables like that:

    @include css-vars($my-calendar-theme);
    Note

    If the component is using an Emulated ViewEncapsulation, you still have to use :host because you need a global selector in order to override the variables.

    :host {
    @include css-vars($my-calendar-theme);
}

    After everything's done, your component should look like this:

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.