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.

    EXAMPLE

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    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
    cmd

    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.

    The IgxMonthPickerComponent also depends on the BrowserAnimationsModule and optionally 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 {}
    typescript

    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 {}
    typescript

    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 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>
    html

    Setting date

    Set a date to IgxMonthPickerComponent using the value input.

    // month-picker-sample.component.ts
    
    public date: Date = new Date();
    typescript
    <!-- month-picker-sample.component.html -->
    
    <igx-month-picker [value]="date"></igx-date-picker>
    html

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

    <!-- month-picker-sample.component.html -->
    
    <igx-month-picker [(ngModel)]="date"></igx-date-picker>
    html

    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>
    html
    // month-picker-sample.component.ts
    
    public date: Date = new Date();
    public numericFormatOptions = {
        month: '2-digit'
    };
    typescript

    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>
    html
    // month-picker-sample.component.ts
    
    public date: Date = new Date();
    public locale: 'fr';
    public formatOptions = {
        month: 'long'
    };
    typescript

    Here is an example of localizing and formatting the month picker component:

    EXAMPLE

    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.
    App Builder | CTA Banner

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

    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: #011627,
      $ym-current-foreground: #ecaa53,
      $ym-hover-background: #ecaa53,
      $navigation-color: #ecaa53,
      $picker-hover-foreground: #d37b08,
      $navigation-hover-color: #d37b08,
      $picker-foreground: #ecaa53,
    );
    scss

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

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

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

    Demo

    EXAMPLE

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.