Month Picker Specification

Revision History

Version	User	Date	Notes
0.1	Stefan Ivanov	17.01.2019
0.2	Zdravko Kolev	01.09.2020	onSelection update

1. Overview

GitHub	Milestone	Issue#	Name
igniteui-angular		#3126	MonthPicker - new component - feature request

Objectives

Provide an Angular native month and year picker showing similar interface to the igx-calendar but just for the month and year, which lets users select a month/year value. The display format could be customized but the date value is always in local time format.

2. User Scenarios

The month picker supports the following use scenarios:

Indicate selected month and year
Allow selection for month/year to be set programmatically
Allow only single selection
Allows navigation to years
Display format is customizable
Year is spin-able in year view with the keys UP/DOWN and PageUP/PageDown allow incrementing/decrementing
Year is spin-able in month view when the year is in focus with the keys LEFT/RIGHT and PageUP/PageDown allow incrementing/decrementing

As an end user

Story 1: I want to be able to select a month and a year
Story 2: I want to be able to navigate to the upcoming and past months and years in different ways (scroll, swipe, arrows, keyboard)
Story 3: I want to be able to navigate the calendar with the keyboard

As a developer

Story 1: I want to be able to implement a month picker in my application.
Story 2: I want to be able to set the month/year date format.

Acceptance criteria

All user stories must be satisfied.

Functionality

Calendar
- Year/Month navigation
Custom date display format
- List of date pattern is used:
- Y: year field without century and without leading zero Sample display value: 9 for 2009-06-**
- YY: year field without century and with leading zero Sample display value: 09 for 2009-06-**
- YYYY: year field with leading zeros Sample display value: 2009 for 2009-06-**
- M: month field as digit without leading zero Sample display value: 7 for 2009-07-**
- MM: month field as digit with leading zero Sample display value: 07 for 2009-07-**
- MMM: month field as short month name (up to 4 letters) Sample display value: Aug for 2017-08-**
- Short month name Full month name
  
  Jan January
  
  Feb February
  
  Mar March
  
  Apr April
  
  May May
  
  Jun June
  
  Jul July
  
  Aug August
  
  Sept September
  
  Oct October
  
  Nov November
  
  Dec December
- MMMM: month field as long month name Sample display value: August for 2017-08-**

3.1 Developer Experience

The developer should be able to attach the month picker to a trigger such as an input or an icon.

3.2 End user Experience

The user should be able to select month and year from the calendar interface that we provide.

3.3 Keyboard Navigation

Replicate the interactions from the Date Picker calendar interface for the year header and month/year navigation.

Right/Left arrows can be used for keyboard navigation through the months. In order to navigate through the years use PageUp and PageDown keys.