Skip to content

Month Picker Specification

Stefana Andreeva edited this page Feb 5, 2019 · 8 revisions

Month Picker Specification

Contents

Revision History

  1. Overview

    Objectives

  2. User Scenarios

    As an end user

    As a developer

    Acceptance criteria

  3. Functionality

    3.1. Developer Experience

    3.2. End User Experience

    3.3. Keyboard Navigation

    3.4. API

  4. ARIA support

  5. Assumptions and Limitations

  6. References

Revision History

Version User Date Notes
0.1 Stefan Ivanov 17.01.2019

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 an year
  • Story 2: I want to be able to navigate to 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

4. ARIA Support

Specify only if applicable

5. Assumptions and Limitations

Assumptions Limitation Notes

6. References

Clone this wiki locally
You can’t perform that action at this time.