# igxMonthPicker Component

The **igxMonthPicker** provides a way for the user to select a month.


## Dependencies
In order to be able to use **igxMonthPicker** you should keep in mind that it is dependent on **BrowserAnimationsModule**,
which must be imported **only once** in your application's AppModule, for example:
```typescript
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
	imports: [
        BrowserAnimationsModule,
        ...
	]
})
export class AppModule {
}
```
Also the **igxMonthPicker** uses the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) WebAPI for localization and formatting of dates. Consider using the [appropriate polyfills](https://github.com/andyearnshaw/Intl.js/) if your target platform does not support them.


## Usage

Importing the month picker in your application
```typescript
import { IgxMonthPickerComponent } from "igniteui-angular";
```

Instantiate a month picker component and pass a date object.
```html
<igx-month-picker [value]="dateValue" [viewDate]="viewDate"></igx-month-picker>
```

The **igxMonthPicker** implements the `ControlValueAccessor` interface, providing two-way data-binding
and the expected behavior when used both in Template-driven or Reactive Forms.
```html
<igx-month-picker [(ngModel)]="dateValue"></igx-month-picker>
```

Customize the format, set the views to be formatted and the locale
```typescript
    public formatViews = { month: true, year: true };
    public formatOptions = { month: 'long', year: 'numeric' };

    public localeDe = 'de';
```

```html
<igx-month-picker [formatOptions]="formatOptions" [formatViews]="formatViews" [locale]="localeDe"></igx-month-picker>
```

### Keyboard navigation
When the **igxMonthPicker** component is focused:
- `PageUp` will move to the previous year.
- `PageDown` will move to the next year.
- `Home` will focus the first month of the current year.
- `End` will focus the last month of the current year.
- `Tab` will navigate through the subheader buttons;

When `prev` or `next` year buttons (in the subheader) are focused:
- `Space` or `Enter` will scroll into view the next or previous year.

When `years` button (in the subheader) is focused:
- `Space` or `Enter` will open the years view.

When a month inside the months view is focused:
- Arrow keys will navigate through the months.
- `Home` will focus the first month inside the months view.
- `End` will focus the last month inside the months view.
- `Enter` will select the currently focused month and close the view.
- `Tab` will navigate through the months;


## API Summary

### Inputs

- `id: string`

Unique identifier of the component. If not provided it will be automatically generated.

- `locale: string`

Controls the locale used for formatting and displaying the dates in the month picker.
The expected string should be a [BCP 47 language tag](http://tools.ietf.org/html/rfc5646).
The default value is `en`.

- `viewDate: Date`

Controls the year/month that will be presented in the default view when the month picker renders. By default it is the first day of the current year/month.

- `value: Date`

Gets and sets the selected date in the month picker component.

- `formatOptions: Object`

Controls the date-time components to use in formatted output, and their desired representations.
Consult [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
for additional information on the available options.

The defaul values are listed below.
```typescript
{ month: 'short', year: 'numeric' }
```

- `formatViews: Object`

Controls whether the date parts in the different month picker views should be formatted according to the provided
`locale` and `formatOptions`.

The default values are listed below.
```typescript
{ month: true, year: false }
```

### Outputs

- `onSelection(): Date | Date[]`

Event fired when a value is selected through UI interaction.
Returns the selected value (depending on the type of selection).

- `viewDateChanged(): IViewDateChangeEventArgs`

Event fired after the month/year presented in the view is changed.
Emits an object containing the previous and current value of the `viewDate` property.

- `activeViewChanged(): CalendarView`

Event fired after the active view is changed.
Emits an CalendarView enum, indicating the `activeView` property value.
