PLEASE NOTE: As we have not yet determined the final format of the Time Picker, these are storycards for a Date Picker only. We anticipate that at some point there could be up to three components: a date picker, a time picker, and a (combined) date-time picker.
Storycard 1: Allow user to select a date using a mouse
- Pop-up a date picker when the user clicks inside the date text field. (Later is will be customizable whether the date picker pops up automatically or is opened by clicking on an icon.) The date picker should:
- be a standard calendar grid
- display the initial of the days of the week as column header across the top, starting with Sunday (i.e. S, M, T, W, T, F, S). (Later week start date will be configurable.)
- For Saturday & Sunday, use faint grey as the background colour of the cells. (Later what the "weekend" is will be configurable.)
- Display the dates in the displayed month as links
- When user clicks on a date, enter the date in the date text field in the following format: "Jan 1, 2009" and close the date picker pop-up after 1 second. (Later the date format will be configurable.)
Storycard 2: Allow user to navigate to dates outside of the initially displayed month
- Provide a month dropdown and a year dropdown at the top of the calendar. When a different month is selected, display selected month of the same year in the calendar area. When a different year is selected, display the same month (as the currently displayed one) of the selected year.
- Display forward and backward arrows on either side of the month and year dropdowns. The next month is displayed when the forward arrow is clicked, and the previous month is displayed when the backward arrow is clicked.
- Add "Today's Date is: " section at the bottom of the calendar. Date format should be "Jan 1, 2009," but be configurable in the future. When user has navigated off to other months, clicking on this link quickly brings them back to the current month.
Storycard 3: Style calendar to make it easier to comprehend
- Indicate today's date in the calendar: Use the pressed-look to indicate today's date in the calendar, such that other additional styling (selection, hover, or grey-out) can be applied to it as needed
- Indicate the mouse-over selection: Highlight the dates in light blue upon mouse-over
- Indicate the selected date: When user clicks on a date (hence closes the date picker) and opens the date picker again, the selected date should be indicated in the calendar with dark blue background on white text
Storycard 4: Display additional information in the calendar using visual styles to help date selection
- Indicate previously selected date: When user opens one of a series of date fields, indicate the dates contained in related date pickers on the calendar with white text on dark grey background (e.g. Open date, Due date, Accept until date).
- Disable irrelevant dates: Display the irrelevant dates (e.g. blackout dates, or potential due dates which are *prior* to an open date and thus shouldn't be selectable) in grey text and make them non-clickable
Storycard 5: Allow user to type a date into the text field
- Allow implementers to specify the default date-time format, which is how the date will be displayed in the text field when the date picker is closed.
- Allow the date picker to receive input from the a particular user's preferences settings about how they would like to format the date-time field.
- Allow users to type a date in the date field which changes the display of the calendar as the user types (e.g. as user types, "J", the month is changed to "January").
Storycard 6: Allow implementers to configure defaults
- Allow configuration of default date (for each date picker or for all date pickers in an application)
- Allow configuration of default time (for each date picker or for all date pickers in an application)
Storycard 7: Add styling to give users additional control of the date picker
- Add a "Close" button that closes the date picker when activated
- Allow date picker to be dragged if it is "grabbed" anywhere that is not clickable. Cursor should be an open hand in those areas.
Storycard 8: Internationalize the date picker
- Enable the integrator to configure the calendar so that any day of the week (e.g. Monday) is specified to start the week.
- Enable calendar to display right-to-left instead of left-to-right
- Create a system (e.g. external file) to allow implementers to localize the date and time picker by creating a mechanism to replace all text and numbers in the date picker with translations in other languages.
Storycard 9: Allow multi-month display of Date Picker
- Allow the date picker to display two months side by side
- Allow the date picker to display two months, one underneath the other
- Allow the date picker to display 6 months in a 3 x 2 grid
- Allow implementors to configure which of these date picker views (or the single month display) they would like to use
Storycard 10: Allow implementers to customize certain settings
- Allow all configurations below on both a per application and per date-time picker basis
- customize whether the date picker pops up automatically or is opened by clicking on an icon (TBD: whether the icon should be *in* -- e.g. Kayak.com -- or *next to* the text field)
- allow customized alignments for the date picker (e.g. http://www.obout.com/calendar/calendar_datepicker_align.aspx)
- make it configurable whether there is just a time picker, just a date picker, or a date-time picker
- allow the setting of a a maximum range (e.g. the current semester)
- allow implementer to make certain dates (e.g. holidays) unselectable
- allow implementer to configure whether or not "Today is: xxx" is displayed
- allow implementer to specify any day or set of days of the week the "weekend" (see http://en.wikipedia.org/wiki/WeekEnd)
Storycard 11: Smart text recognition
- Process text such as "next thursday" (potentially using a library such as: http://www.datejs.com/) into a date