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

Usage

The first step is to import the IgxCalendarModule inside our app.module.ts file. Note that the IgxCalendar also depends on the BrowserAnimationsModule and on 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';
@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, 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();
<!-- 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 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:

@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 igx-calendar-theme and use some of its parameters to style the month picker's items:

$my-calendar-theme: igx-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 igx-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 igx-calendar($my-calendar-theme);
    }
}

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

@include igx-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 igx-css-vars($my-calendar-theme);
}

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

Demo

API References

Additional Resources

Our community is active and always welcoming to new ideas.