Date Time Picker Storyboard - Editing a selected date

Omnigraffle file for this storyboard: DatePickerPaperPrototype4.graffle.zip or DatePickerPaperPrototype5Tabbed.graffle.zip

George has entered the dates and times for the assignment titled Yellow Journalism. He double checks to make sure everything is correct.

He notices that the Due date is incorrect. He meant to enter September 17th, instead of August 17th. He clicks on the Due date field and the calendar opens. Dates which have been selected in other fields in the month of August are shown in dark blue and the selected date in the currently active field (August 17th) is shown in a medium blue. Because August 17th has both been selected for another field and is the currently active field, it is shown as medium blue with a dark blue border.

George mouses over the dropdown arrow next to "August" and the dropdown arrow changes from gray to black. A dark gray box also appears around the word "August" to show that it can be opened.

He clicks on the black dropdown arrow next to "August" (or anywhere in the box) which opens the dropdown. He sees that August is highlighted. Because the dropdown is open and focus has moved there, the cursor no longer appears in the text entry field.

George mouses over September.

George selects September. The calendar for the month of September is now displayed. The cursor returns to the text entry field.

George mouses over the number 17th.

George selects September 17th. The calendar closes itself and the selected date is shown in the Due date field.

George decides he'd like the assignment to be accepted almost indefinitely, so he decides to move the Accept until date out a year. George clicks on the Accept until field and the calendar opens. Dates which have been selected in other fields in the month of August are shown in dark blue and the selected date in the currently active field (August 17th) is shown in a medium blue.

George mouses over the dropdown arrow next to the "2007" and the arrow becomes black. A dark gray box also appears around the 2007 to show that it can be opened.

George clicks on the arrow (or anywhere within the box) and the dropdown box opens to display all the "jump to" year options available. The currently selected year has a light blue background. Because the dropdown is open and focus has moved there, the cursor no longer appears in the text entry field.

George mouses over 2008 in the dropdown and the light blue background moves from 2007 to 2008.

George clicks on "2008" and the calendar jumps to August 2008. The cursor appears back in the text entry field.

George mouses over August 17.

George clicks on August 17th. The calendar closes itself and the selected date is shown in the Accept Until field.