Month Picker Specification
| Version | User | Date | Notes |
|---|---|---|---|
| 0.1 | Stefan Ivanov | 17.01.2019 |
| 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 UTC ISO 8601 format.
The date picker widgets supports the following use scenarios:
- Highlight todays’ date
- Allow fast navigating to the date today
- Indicate selected date and have it displayed(in text/input)
- Allow expand/collapse of the date picker calendar upon events (e.g., date pick)
- Allow date setting programmatically
- Allow only single date selection
- Multiple months displayed
- Vertical display
- Calendar could displays leading and trailing days from the previous and the following month
- Calendar supports first day of the week customization (e.g. Sunday or Monday)
- Calendar shows in header the selected day (only for single selection)
- Calendar allows navigation to other months/years
- Date display format is customizable
- Display date is spin-able by a delta of 1. Upon selection of a day, month or year keys UP/DOWN and PageUP/PageDown allow incrementing/decrementing the selected date element
- Input Field integration
- Allow Hide/Show input label.
- Allow customization of input label.
- Story 1: I want to be able to visually identify what day it is today – day of the week, date of the month.
- Story 2: I want to be able to visually differentiate the current day.
- Story 3: I want to be able to visually differentiate business, weekend and disabled days.
- Story 4: I want to be able to navigate to upcoming and past months and years in different ways.(scroll, swipe, arrows, keyboard)
- Story 5: I want to make possible for the user to select a single, multiple days or range of days upon click/tap on dates. Editable date picker allows only for a single date selection and if the use case requires range selection, two editable date pickers should be used.
- Story 6: I want to edit date in a text input when the date picker is editable.
- Story 7: I want to clear the entered value in the input using clear button when the date picker is editable.
- Story 8: I want to either type in a date inside the input or select it from the dropdown when the date picker is editable
- Story 9: I want to be able to navigate the calendar with the keyboard
- Story 10: I want to be able to iterate the date portion inside the input with the up (increase) and down (decrease) arrow keys.
- Story 1: I want to be able to implement a date picker in my application.
- Story 2: I want to specify whether the date picker is editable and shows a dropdown or read-only that prompts a modal dialog.
- Story 3: I want to implement a shortcut for the current day.
- Story 4: I want be able to show and hide leading and trailing days from the previous and the following month visually identifying them as such.
- Story 5: I want to set the starting/first day of the week and the date format based on their locale.
- Story 6: I want to have a min width for the dropdown when the date picker is editable so that is doesn't get squeezed and distorted if the input is too narrow
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-21
-
YY: year field without century and with leading zero Sample display value: 09 for 2009-06-21
-
YYYY: year field with leading zeros Sample display value: 2009 for 2009-06-21
-
M: month field as digit without leading zero Sample display value: 7 for 2009-07-21
-
MM: month field as digit with leading zero Sample display value: 07 for 2009-07-21
-
MMM: month field as short month name (up to 4 letters) Sample display value: Aug for 2017-08-21
-
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
Specify only if applicable
| Assumptions | Limitation Notes |
|---|---|