Date Time Picker Storyboard - Date and Time Separate Fields with Defaults

Omnigraffle file for this storyboard: Separate with default date - 5.graffle.zip

Journalism professor George McFadden finds it helpful to be able to distribute and accept assignments online. He creates them in bSpace in the Assignments tool and releases them on a weekly basis for his students. After creating an assignment in the Assignments tool, he assigns it an open date which coincides with the date he presents the related material in lecture. This week he's creating an assignment on Yellow Journalism, which he gives an open date of August 3rd, 2007 at 10:50am, when the lecture is done. He appreciates being able to specify the open time in addition to the date because he doesn't want students to be able to look at the assignment during the lecture.

George opens the Assignments tool in bSpace.

He enters the title of the new assignment, "Yellow Journalism."

Next he clicks on "Open Date" and the date picker pops up. Because there is a default date already in the field, this date is shown with a dark blue background.

George mouses over August 3rd. As he mouses over dates on the calendar which are clickable, a light blue highlight is displayed on that date. All dates are clickable in this case because the "Open Date" is chronologically the first date in a series of dates.

When George clicks on August 3rd, the calendar closes and the new date is populated in the text field. An alternate presentation of the date above it, which is used primarily to clarify unclear dates (e.g. 2/7/07), also changes to match the new date.

George clicks on the time field and the time picker opens. Because there is a default time in this field, the Hour, Minutes, and AM/PM selections are shown with a dark blue background.

George mouses over the hour he'd like to select and a light blue highlight appears there.

George clicks on the hour he'd like to select, and the blue background moves to this hour, '10,' showing that it's been selected and this change is made in the text field..

George mouses over the minute he'd like to select and a light blue highlight appears there.

George clicks on the minute he'd like to select, and the blue background moves to this minute, '50,' showing that it's been selected and this change is made in the text field.

George mouses over 'AM' in the AM/PM section and a light blue highlight appears there.

George clicks on 'AM,' and the date picker closes immediately because the user has clicked on all three elements. The new time is populated in the text field.

Next, George clicks on "Open Date" and the date picker pops up. Because there is a default date already in the field, this date is shown with a dark blue background. He'd like to change the Due Date to be two weeks after the Open Date.

George mouses over August 17th. As he mouses over dates on the calendar which are clickable, a light blue highlight is displayed on that date. Any date on or after the "Open On:" 8/3/07) is clickable because the "Open On" date must be the same as or earlier than the "Due On" date.

When George clicks on August 17th, the calendar closes and the new date is populated in the text field. An alternate presentation of the date above the text field changes to match the new date as well.

George clicks on the time field and the time picker opens. Because there is a default time in this field, the Hour, Minutes, and AM/PM selections are shown with a dark blue background.

George mouses over the hour he'd like to select, '5,' and a light blue highlight appears there.

George clicks on the hour he'd like to select, and the blue background moves to this hour, '5,' showing that it's been selected. George doesn't need to change the minute, so he doesn't select anything there. Although he doesn't need to change AM/PM either, he mouses over PM (where a light blue highlight appears), thinking that when he clicks on it it would close the date picker.

George clicks on 'PM,' and the date picker closes immediately because Hour and Minute were filled in, and AM/PM has been clicked on. (Whenever the AM/PM is clicked on and the other items have been filled in,  whether in the time picker or the text field, the time picker closes.) Additionally, the "Accept Until" date and time is updated to be the same as the "Due on" date and time because there is a rule between these fields saying that the "Accept Until" date and time must be the same as or after the "Due On" date and time.

George doesn't need to change the Accept Until Date, because he would like it to be pretty much the same as the Due Date. However, he will give his students some leeway and actually accept the assignment until 11:59pm that day, even though it is technically due at 5pm. George clicks on the 'Accept Until' time field and the time picker opens. Because there is a default time in this field, the Hour, Minutes, and AM/PM selections are shown with a dark blue background.

George mouses over the hour he'd like to select, '11,' and a light blue highlight appears there.

George clicks on the hour he'd like to select, and the blue background moves to this hour, '11,' showing that it's been selected and this change is made in the text field.

George doesn't see the minute he'd like to select, '59,' so he mouses over the minute closest to the one he'd like to select, '55,' and a light blue highlight appears there.

George clicks on the '55' minute option and the blue background moves there showing that it's been selected and this change is made in the text field.

George really wants the minute to be '59,' so he backspaces and deletes four characters: "5 pm". The dark blue highlight indicating the selections of 'PM' and '55' Minutes is removed, since this is no longer what the user has typed in the text field. Because "5" (by itself; '05' would be) is not a valid (complete) selection for minutes either, there is no selection at all shown in the Minutes section.

George then types a '9' into the text field. Because there is no '59' option in the Minutes section, nothing is shown as selected in Minutes.

George mouses over the 'PM' and a light blue highlight appears there.

George clicks on 'PM,' and the date picker closes immediately because Hour and Minute were filled in, and AM/PM has been clicked on. (Whenever the AM/PM is clicked on and the other items have been filled in, whether in the time picker or the text field, the time picker closes.)

Just to check and make sure everything looks right, though George doesn't need to change the "Accept Until" date he clicks on it to open the date picker. He sees in a calendar view of the weeks that the "Accept Until" date is indicated in blue and one of the other dates in this group of dates is set for August 3rd. Since he can also see the dates in the text fields above the date picker, he doesn't need to know exactly which date is which and can see that the dates are basically a week apart--which is what he wanted.

George clicks somewhere on the page outside the date picker and it closes.

Later in the semester he decides to make this assignment more difficult, and wants to give the students more time to do it. He opens the date picker by clicking on the "Due On" field.

Since he'd like to move the due date out a month, he mouses over the word "August" in the date picker header. He sees a gray border appear around the word, and the drop-down arrow indicator becomes darker.

It seems to George that a drop-down list may be underneath, so he clicks on the word "August." A drop-down list does indeed appear with the month of "August" shown as selected. Because keyboard interactions now take place within the drop-down, the cursor disappears from the text field.

As he'd like to move the date out a month, George mouses over the word "September," and a the light blue selection indicator moves there.

George clicks on the word "September" and the date picker calendar changes to September. Because the drop-down has been closed, the cursor returns to the text field in the same place it was before. George mouses over the date he'd like to select, '17,' and a light blue highlight appears.

When George clicks on September 17th, the calendar closes and the new date is populated in the text field. Additionally, the "Accept Until" date and time is updated to be the same as the "Due on" date and time because there is a rule between these fields saying that the "Accept Until" date and time must be the same as or after the "Due On" date and time.

Later in the semester, because George decides he will accept late work long after the due date for increasingly reduced credit, he decides to just move the "Accept Until" date out a year in the future. This way he's sure all his students will have the opportunity to submit this assignment at any reasonable time in the future. He clicks on the "Accept Until" date field and the date picker appears.

George mouses over the year "2007" in the date picker header. He sees a gray border appear around the number, and the drop-down arrow indicator becomes darker.

Since George now knows that a drop-down list is underneath, he clicks on the "2007." A drop-down list appears with the year "2007" shown as selected. Because keyboard interactions now take place within the drop-down, the cursor disappears from the text field.

George mouses over the next year, '2008,' and the light blue selection indicator moves there.

George clicks on the year "2008" and the date picker calendar changes to September 2008. Because the drop-down has been closed, the cursor returns to the text field in the same place it was before. The light blue mouseover highlight remains where his cursor was before clicking, on the '6.'

George mouses over the date he'd like to select, '17,' and a light blue highlight appears there.

When George clicks on September 17th, 2008 the calendar closes and the new date is populated in the text field.