-
Notifications
You must be signed in to change notification settings - Fork 161
Month Picker Specification
Version | User | Date | Notes |
---|---|---|---|
0.1 | Stefan Ivanov | 17.01.2019 | |
0.2 | Zdravko Kolev | 01.09.2020 | onSelection update |
GitHub | Milestone | Issue# | Name |
---|---|---|---|
igniteui-angular | #3126 | MonthPicker - new component - feature request |
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.
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
- 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
- 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.
All user stories must be satisfied.
-
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-**
-
The developer should be able to attach the month picker to a trigger such as an input or an icon.
The user should be able to select month and year from the calendar interface that we provide.
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.
OnSelection
- Emits an event when a date is selected from the month view. The event will NOT be emitted on
- Year change through mouse click interaction (by using the navigation buttons)
- Year change through dacade view interaction
- Year change with PageUp и PageDn keys
Specify only if applicable
Assumptions | Limitation Notes |
---|---|