Date Time Picker Functional Requirements

Use cases

Instructors & Instructional Designers

• Post important dates (i.e. exams, deadlines, events, course meetings) in site's Schedule
• Set a date for a timed release of contents ("opening" or "available" or "from" date, e.g. for assignments, quizzes, announcements, resources, polls)
• Post a due date (e.g. for an assignment)
• Hide contents/stop accepting submissions on a certain date or after a certain period of time ("expire" or "closing" or "end" or "accept until" date)

Students

• Enter a due date when adding a task in My Tasks (Blackboard)
• Enter an event in the Calendar (Blackboard)
  • Enter start date
  • Enter start time
  • Enter end date
  • Enter end time
  • Enter duration
• Enter important dates in their personal Schedule (Sakai)
  • Enter start date
  • Enter start time
  • Enter end date
  • Enter end time
  • Enter duration

General

• Enter a birth date (e.g. a date in the past)
• Enter a date in the future using words (e.g. tomorrow, next Tuesday)

Requirements

• Allow picking a date
  • Show a calendar for date selection
  • Allow typing a desired date in the text field
  • Allow clicking on a desired date in the calendar in order to select a date
  • Handle dates with constraints (e.g. it must be in the future, it must be before or after another date)
    • Allow previous dates to be inactive
    • Allow any dates prior to the start-date to be inactive when picking an end-date
    • Allow make holidays, weekends, special dates not selectable
  • Allow the user to view start and end dates on one calendar on one calendar
  • Highlight today's date
  • The selected date appears in the text field and is indicated in the calendar

• Allow picking a time
  • Display AM/PM or display time in 24h scale depending on the local convention
  • Display hour and minutes
  • Allow any number of minutes to be entered/selected
  • Allow typing in the numeric text field

• Date, date/time or time only entry should be configurable
• Each Date Picker should occupy no more than one line when not open
• Allow the date, time, and time zone information should be localized across all of the date pickers in a certain context (s)
  Each Sakai user has the ability to set their own localization preferences for their UI, as well as each Sakai deployment setting an installation-wide default. The date widget should follow the correct algorithm for determining the appropriate Locale, and present the date and time information using
  • correctly localized Strings for months and days
  • correctly oriented calendar accounting for the start day of a week(e.g. Sunday or Monday)
  • correctly localized representation of an overall date, whether yy/mm/dd, yy/dd/mm etc.
  • correct appreciation of local timezones and cutover days for daylight savings time
• The component should be screen reader accessible
• When in edit mode, allow editing of a particular part of a date in text (e.g. day or month) with a single click; double click makes the entire date editable
• The icons, colors, font face, and font size of the calendar should be customizable using CSS
• Date Pickers should be able to know and display the dates of related date pickers

Optional Requirements

• Ability to display either a single or multiple months (i.e. Travelocity)
• The date and time fields should be separate or merged
• Be able to set the date/time defaults or ordering to show relevant dates (e.g. for a birthdate perhaps the ordering should be backwards)
• String to time parsing (e.g. enter "tomorrow", "tomorrow at 3pm", or "in a week" and have the system calculate the date) - looks like this module may be able to do that: http://www.datejs.com/
• Ability to set a maximum range (e.g. the current semester)
• Ability to show/hide timezone (and maybe other things in a complex view)
• Not sure if this is part of the date picker, but the application could be smart and when it sees a date being entered in e.g. the "short description," it could ask whether the user wanted to enter this as the "due date."
• Allow Admin to make certain dates (e.g. holidays) unselectable
• Allow Admin to set default dates & times (e.g. today, a week from the start date, 5pm) for each date and time picker
• Allow customized alignments for the date picker (e.g. http://www.obout.com/calendar/calendar_datepicker_align.aspx)
• Allow displaying of the week number

Specifications for Date Picker

1. Recognize multiple date formats, and convert to default/display date format when focus is shifted off the field (e.g. remember the milk)
2. Date and time will be separate fields (at least in the default or this version of the component)
3. Set a smart default date (e.g. today's date for something like a schedule), or no default date at all when it may result in user error (e.g. an assignment due date)
4. When there are multiple related dates in the current view, display them in the date picker in which a date is currently being entered (e.g. if you're entering a retract date and an available date and due date have already been entered, they should be shown). Use color to distinguish the different dates including today's date. (e.g. red, yellow, green)
5. The date picker pops up automatically when you click into the date field. Provide a way to hide/remove the date picker while you are editing the field. (e.g. a "close" "X")
   • use case: The user needs to actually see what is in fields covered up by the date picker WHILE they are editing the field. For example, entering an available date when a due date and retract date have already been entered
6. When you mouse over a date, show the date in a different style to show that it can be selected, and then after it's clicked on the style should change to show it's been selected. (the dates that can't be selected don't show any different mouseover style. they should be grayed out and remain that way.)
7. Left align the date picker with the field it's acting on.
8. Display the date picker directly below the field it's acting on with no space in between
9. Allow administrators/integrators to configure one/two months calendar view and also configure whether the two months view displays the calendars side-by-side or one on top of the other (e.g. Kayak, Upcoming)
   • use case: It is almost the end of a month, and the user is setting up an assignment due early next month. It would be nice to be alble to see which day the assignment is becoming available and which day it is due at one glance without clicking through the months.
10. Differentiate the Sunday & Saturday columns with a different background color to indicate that they are the weekends.
11. Differentiate the column headers (e.g. S, M, T) with a different background color
12. Strongly differentiate today's date from selected date(s) with a very different visual style (e.g. changing font color as opposed to background color).

Specifications for Time Picker

1. Recognize multiple time formats (12 hr clock vs. 24 hr clock) and convert to default/display time format when focus is shifted off the field
2. Set a smart default time, or no default time at all when it may result in user error (e.g. an assignment due date)
3. When there are start/end times in the current view, display them in the time picker in which the time is currently being selected (e.g. if there's a start time already entered, show it as the end time is being entered). Use color to distinguish the different times. (e.g. red, yellow, green)
4. The time picker pops up automatically when you click into the date field. Provide a way to hide/remove the date picker while you are editing the field. (e.g. a "close" "X")
   • use case: The user needs to actually see what is in fields covered up by the time picker WHILE they are editing the field. For example, entering an available date when a due date and retract date have already been entered
5. When you mouse over a time, show the date in a different style to show that it can be selected, and then after it's clicked on the style should change to show it's been selected. (the times that can't be selected don't show any different mouseover style. they should be grayed out and remain that way.)
6. Left align the time picker with the field it's acting on.
7. Display the time picker directly below the field it's acting on with no space in between
8. Allow administrators/integrators to configure the time picker and also configure whether it displays in a 24 or 12 hour clock.

Open Questions

1. Do we need to make date picker movable so it's not covering up things? The close "X" will not help if it pops up every time you click in the date field. Another option would be to configure it to allow the implementer to include a calendar icon in any situation where it may need to be closed. Perhaps it would also not pop up automatically when the user clicked in the field in that situation. Would we also need a time picker icon, or would it be best to collapse date and time into a single field in that situation?
2. Sakai has a use case for editing date-times in Mneme which would not be covered if the datepicker dates and times were separate fields. Should there be a different version for "single date-time field" or should this be the standard?
3. One suggestion by Diana was that it might be nice to have a calendar that just stayed open while dates are being entered into Mneme in the table format. Would the benefits to this interaction (calendar not popping up constantly when moving from field to field) outweigh the additional complication to the interaction (how do users know what field they are actually editing when they pick at date in the date picker?)?
4. Is the scrolling time picker interaction too complicated for people? Will they know that they can actually edit the time if we give them too many options (e.g. minutes in 05 increments) in the drop-down?
5. Should the calendar have "help?"
6. Should the calendar allow for the display of "week #s?"
7. Should the date picker allow selection of multiple dates at once (e.g. for a recurring event)?

Sakai Requirements

• Sakai Date Widget Requirements and Designs
• Sakai Bug for creating Standard Calendar Widget(s) for Date-Time Selection
• Sakai Date Widget Improvement Suggestions
• Sakai Draft UI Requirements for post-2.2 Calendar Widget