Time Picker Storycards

Storycard 1: Display Time Picker

Pop-up a time picker when the user clicks inside or tabs to the time text field.
For North America, display options for a 12-hour clock by default: 12 hour options (i.e. 1, 2, 3, ... , 12), 12 minute options (i.e. 00, 05, 10, ... , 50, 55), and am/pm options
Display a title for the "Hour" and "Minute" option groups.
Display a rounded faint grey box around each group of options to visually group them together
Highlight the option in light blue on mouse-over
If there a default or previously entered time in the text field, ensure that the time picker displays these selected options as white text with a deep blue background
Allow time picker to be dragged if it is "grabbed" anywhere that is not clickable. Cursor should be an open hand in those areas.
Ensure that users can always type within the text field if they place their cursor there.

When user clicks on a time, enter the selected time in the time text field in the following format: hh:mm AM or hh:mm PM (this will later be customizable).
Have the text field update with that portion of the time each time an individual option (e.g. hour, minute, AM/PM) is selected or changed.
If the time text field is empty and:
- Hour is selected first, display it in the text field with the colon (e.g. 8: ) .
- Minute is selected first, include the colon (e.g. :00) and leave space in front of it for a 2 digit hour.
- AM/PM is selected first, leave 5 spaces in front of it, for a two digit hour, a colon and a two digit minute.
Enable Keyboard interactions as follows:
- Focus should be put on "Hour" header when user opens time picker.
- Tab moves between the headers (i.e. From Hour to Minute) or in the case of AM/PM, to the first value of the section (AM).
- A tab from the AM/PM section closes the time picker and moves focus back to the end of the text in the text field.
- Up and Down and right and left arrow keys allow users to move around in a section when the header or AM is active
- Space bar or enter selects a value and moves focus to the header (or AM) of the next section.

When the user enters enough information in the text field for the system to figure out any part of a time, have the corresponding selection highlight in dark blue with white font in the time picker
- When the user types xx: (e.g. 12: ) , mark the appropriate selection (12) in Hour section
- When the user types :xx, mark the appropriate selection in the Minutes section. If the user specifies a minute increment that isn't available in the time picker, don't show anything as selected in the Minute section.
- When the user types AM or am or PM or pm, mark the appropriate selection in the AM/PM section
If the user enters a time that is not supported by the time picker (e.g. 55:55pm, or 13:31 in the 12-hour time picker), don't highlight anything in the section with the error. But it is OK to highlight other sections (e.g. in the first example, :55 minutes and pm) if they are valid selections on their own.

Automatically close the time picker upon selecting the third different type of option. For example, if the user chose the am/pm first, then hour, then minutes, close the time picker upon the minute option being selected.
Close when the user clicks outside the time picker
Close when the user tabs away from the time text field
Close when the user presses Enter from the time field.
In all the above cases, if the user has not entered all necessary parts of the time, close the picker and show an error. Design for this has not been fully fleshed out, but our suggestion is to make the text field pink and place a permanent error message above the field until the user corrects the error.

When the user selects 12:00pm, display "Noon" above the text field in grey
When the user selects 12:00am, display "Midnight (start of day)" above the text field in grey
When the user changes any of these selections, "Noon" or "Midnight (start of day)" should be immediately removed, even if the time picker hasn't yet been closed.
Allow implementer to specify whether or not "Noon" or "Midnight (start of day)" is displayed above the text field.

Allow time picker to be configured to use either a 12-hour or 24-hour clock
On request, display options for a 24-hour clock: Display 24 hour options (i.e. 1, 2, 3, ... , 23, 24), and 12 minute options (i.e. 00, 05, 10, ... , 50, 55)
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 picker by creating a mechanism to replace all text and numbers in the date picker with translations in other languages.

Add configuration option to display a small clock at the far right (unless it's a right-left reading language, in which case it would be on the left) of the time text field. When present, this clock will toggle the time picker open and closed when clicked on or activated with the enter key. It should be part of the tab order. Interactions should work just like those at kayak.com.

Determine the format in which the time should be presented in a text field (e.g. mm-dd-yyyy) (e.g. the format of the time text fields when selection is made via the time picker) by:
- Allowing implementers to specify the default time format.
- Allowing the date picker to receive input from the a particular user's preferences settings about how they would like to display the date field.

Recognize times whether they are typed (in the text field) with a space between the time and AM/PM or not, or with lower or upper case (e.g. recognize 5:00pm or 5:00 pm or 5:00PM or 5:00 PM)
- These times should be converted to the standard format the application uses when the user leaves the text field.
Interpret times typed into the text field which don't have minutes specified.
- If no minutes are specified, assume :00
- After the user leaves the text field, add the :00 to the minutes in the text field (e.g. "5pm" should change to "5:00pm")
Determine whether there are other times which can be deduced in this way, potentially by using a library such as http://www.datejs.com/