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 Storyboard - Date and Time Combined Field

Owned by Erin Yu
Last updated: Mar 05, 2009 by Allison BloodworthVersion comment
2 min read

Please Note:

Keyboard and screen reader interactions have not yet been added. The following references may be helpful in defining them:

Omnigraffle file for this storyboard: CombinedDateTimePicker.graffle.zip

Anita, the instructional designer, comes to the Modules page to set up the course contents for one of the courses she is supporting, Analytical Research Methods. She had set up modules for each chapter in the course, and now wants to set the release and end date for the modules. She would like to set the release date for the first module to be a week from today at 6am. It should close a week after that, at 11pm.

Anita mouses over the calendar icon inside the start date text field for the first module, Direct Scaling Methods. 

She clicks on the calendar icon to open the date picker.

January 12th looks pressed, because it's today's date. Anita mouses over 19th, a week from today.

Anita clicks on 19. The selected date, "Jan 19, 2009" shows up in the text field, and the cursor is placed after the date. The time picker is now displayed in the overlay, with the date picker tab in the background. Nothing is selected in the time picker.

Anita mouses over 6, and it is highlighted.

Anita clicks on 6, and it is selected with the white text on dark blue background. 6 is displayed in the text field followed by a ":", indicating that this is the hour. The cursor is placed after it.

Anita mouses over 00 under the Minute heading. It is highlighted in blue.

Anita clicks on 00, it is displayed in the text field after the 6: and is selected in the time picker.

Anita mouses over AM.

Anita clicks on AM, and the date/time picker closes itself. She mouses over to the end date text field.

Anita clicks inside the text field, and the date picker opens. The today's date (12) and the selected start date (19) is indicated in the calendar. Any dates previous to the start date are displayed in grey, indicating that she can't select a due date earlier than the start date.

Anita mouses over 26, a week after the start date.

Anita clicks on 26, the selected date "Jan 26, 2009" shows up in the text field. The time picker is now displayed.

Anita hovers over 11.

Anita clicks on 11. 11 is displayed in the text field followed by a ":", indicating that this is the hour.

Anita mouses over PM.

Anita clicks on PM. The time picker assumes the minute to be 00, and displays "11:00 pm" in the text box, and closes the time picker.