Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Date Time Picker Storycards

Owned by Allison Bloodworth
Last updated: Feb 09, 2009Version comment
2 min read

NOTE: The Date Time Picker is essentially a combination of the Date Picker and the Time Picker. The storycards below describe stories that apply only to the combined Date Time Picker and the Date Picker and Time Picker should be referred to if additional detail is needed.

Storycard 1: Combine Date & Time Pickers

  • Allow implementers to configure whether they have a combined date-time field and a combined Date Time picker (as opposed to two separate pickers for date & time).
  • Add tabs for 'Date' and 'Time' to connect the individual Date Picker & Time Picker when it is used with a text field which includes both Date & Time. Tabs should only be used if Date and Time are combined into a single text field.
  • As specified in the Date Picker Storycards, when the user has typed a complete date or picked a date using the Date Picker calendar, the time picker tab should be displayed and focus should be moved to the top of the time picker.
  • Recognize dates and times that are typed in any order, potentially by using a library such as http://www.datejs.com/.
  • Determine the format in which the date and time should be presented in a text field (e.g. mm-dd-yyyy) (e.g. the format of the date-time text fields when selection is made via the date picker) by:
    • Allowing implementers to specify the default date-time format.
    • Allowing the date time picker to receive input from the a particular user's preferences settings about how they would like to display the date-time field.
  • If there is nothing entered in the combined field, when the user clicks on the field or the calendar toggle icon, or tabs to the field, display the date picker tab first.
  • If there is a selected date and time displayed in the combined field, display the date picker tab when the user clicks on the date portion or the calendar toggle icon and put the cursor at the end of the date. Display the time picker tab when the user clicks on the time portion within the text field, and in this case put the cursor at the end of the time.

Storycard 2: Add Date Time Picker toggle option

  • Add configuration option to display a small calendar at the far right (unless it's a right-left reading language, in which case it would be on the left) of the combined date-time text field. When present, this calendar will toggle the Date 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.