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 Picker Storycards

Owned by Erin Yu
Last updated: Feb 13, 2009 by Allison BloodworthVersion comment
6 min read

Storycard 1: Allow user to select a date

  • Pop-up a date picker when the user clicks inside or tabs to the date text field. The date picker should:
    • be a standard calendar grid containing 7 columns for days of the week and 6 rows (to avoid problems like this: http://img103.imageshack.us/img103/2041/iedatepickerbugxl5.jpg when some months have 5 and some 6 rows)
    • display the initial of the days of the week as column header across the top, starting with Sunday (i.e. S, M, T, W, T, F, S). (Later week start date will be configurable.)
    • For Saturday & Sunday, use faint grey as the background colour of the cells. (Later what the "weekend" is will be configurable.)
    • Display the dates in the displayed month as links in the current month style
    • Display the dates in the next and previous months as links in the next-previous month style
  • When user clicks on a date, enter the date in the date text field in the following format: "Jan 1, 2009" and close the date picker pop-up after 1 second. (Later the date format will be configurable.)

Storycard 2: Allow user to navigate to dates outside of the initially displayed month

  • Provide a month dropdown and a year dropdown (which by default includes 10 year options and goes forward in time starting with the current year) at the top of the calendar. When a different month is selected, display selected month of the same year in the calendar area. When a different year is selected, display the same month (as the currently displayed one) of the selected year.
  • Display forward and backward arrows on either side of the month and year dropdowns. The next month is displayed when the forward arrow is clicked, and the previous month is displayed when the backward arrow is clicked.
  • Add "Today's Date is: " section at the bottom of the calendar. Date format should be "Jan 1, 2009," but be configurable in the future. When user has navigated off to other months, clicking on this link quickly brings them back to the current month.

Storycard 3: Style calendar to make it easier to comprehend

  • Indicate today's date in the calendar: Use the pressed-look to indicate today's date in the calendar, such that other additional styling (selection, hover, or grey-out) can be applied to it as needed
  • Indicate the mouse-over selection: Highlight selectable dates (in the future some will be specified as non-selectable) in light blue upon mouse-over
  • Indicate the selected date: When user clicks on a date (hence closes the date picker) and opens the date picker again, the selected date should be indicated in the calendar with dark blue background on white text
  • Display an alternate presentation of the date above the text field to help avoid ambiguity which changes to match what the user has typed when they leave the field. If there is no data in the field, it is blank. By default, use this version of the date, e.g. "Jan 9, 2009".

Storycard 4: Allow for relationships & rules between date pickers

  • Indicate previously selected date: When user opens one of a series of date fields, indicate the dates contained in related date pickers on the calendar with white text on dark grey background (e.g. Open date, Due date, Accept until date).
  • Allow implementers to specify non-selectable blackout dates (individual dates, ranges, holidays and all weekends).
  • Disable non-selectable dates: Display dates which shouldn't be selectable (e.g. blackout dates, or potential due dates which are *prior* to an open date) in grey text and make them non-clickable/selectable with no change on mouseover.

Storycard 5: Allow user to interact with and type dates in the text field

  • Determine the format in which the date should be presented in a text field (e.g. mm-dd-yyyy) (e.g. the format of the date text fields when selection is made via the date picker) by:
    • Allowing implementers to specify the default date format.
    • Allowing the date picker to receive input from the a particular user's preferences settings about how they would like to display the date field.
  • Allow users to type a date in the date field which changes the display of the calendar as the user types (e.g. as user types, "J", the month is changed to "January," if a "u" is typed next it changes to "July," etc. If user types a number, make a guess as to whether it is the month or the day based on the default date format for this Date Picker.)
  • If the user has not entered all necessary parts of the date and closes the picker, show an error. Design for this has not been fully fleshed out, but our suggestion is to make the text field pink and place a permanent error message above the field until the user corrects the error (or perhaps until they begin typing in the field or making a selection in the Date Picker if this is very hard to implement).

Storycard 6: Add functionality to give users additional control of the Date Picker

  • Allow date picker to be dragged if it is "grabbed" anywhere that is not clickable. Cursor should be an open hand in those areas.
  • Allow the date picker to display the week number (current week in the year) in a box (which looks like all the other boxes for dates in the calendar, but has it a particular CSS class so it can be styled differently) at the beginning of the week
  • Display a small calendar icon at the far right (unless it's a right-left reading language, in which case it would be on the left) of the date text field. When present, this toggle icon will toggle the Date 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.

Storycard 7: Internationalize the Date Picker

  • Enable the integrator to configure the calendar so that any day of the week (e.g. Monday) is specified to start the week.
  • Enable calendar to display right-to-left instead of left-to-right.
  • Create a system (e.g. external file) to allow implementers to localize the date picker by creating a mechanism to replace all text and numbers in the date picker with translations in other languages.
  • Allow implementer to specify any day or set of days of the week the "weekend" (see http://en.wikipedia.org/wiki/WeekEnd)

Storycard 8: Allow multi-month display of Date Picker

  • Allow the date picker to display two months side by side
  • Allow the date picker to display two months, one underneath the other
  • Allow the date picker to display 6 months in a 3 x 2 grid
  • Consider allowing other configurations for multiple months
  • Allow implementers to configure which of these date picker views (or the single month display) they would like to use (e.g. see numberOfMonths function: http://docs.jquery.com/UI/Datepicker/datepicker)

Storycard 9: Allow implementers to customize certain settings

  • Allow all configurations below on both a per application/site and per date picker basis
    • allow configuration of the date format that appears by default (for each date picker or for all date pickers in an application)
    • allow implementer to specify whether helpful information is displayed above the text field. It could be any of the following options:
      1. nothing
      2. help text (for example: "e.g. Jan 17, 2007"). If the preferred date format is mm/dd/yyyy or dd/mm/yyyy, implementers should be advised to use an unmistakable date as the example date (for example, "e.g. 1/21/2009"), where the day number is greater than 12.
      3. an alternate presentation of the date which changes to match what the user has typed when they leave the field. If the text field is blank, the help text described in the option above is displayed. Implementers should be advised to only use this option if the default date format is potentially ambiguous (e.g. mm/dd/yyyy or dd/mm/yyyy).
      4. an alternate presentation of the date which changes to match what the user has typed when they leave the field. If the text field is blank, nothing is displayed. Again, implementers should be advised to only use this option if the default date format is potentially ambiguous (e.g. mm/dd/yyyy or dd/mm/yyyy).
    • Specify the format of the alternate presentation of the date above the text field. For example, if the date format in the text field is 2/11/09, "Feb 2nd, 2009" could be displayed above it.
    • allow implementer to specify whether or not the calendar toggle icon is displayed
    • allow customized alignments for the date picker (e.g. http://www.obout.com/calendar/calendar_datepicker_align.aspx)
    • make it configurable whether there is just a time picker, just a date picker, or a date-time picker
    • allow the setting of a maximum range (e.g. the current semester)
    • allow the implementer to specify the year range in the "Years" drop-down (e.g. the year options would likely be different for a birthday date picker, an assignment due date picker, and a museum's object acquisition date picker)
    • allow implementer to configure whether or not the "Today is: xxx" section is displayed
    • allow implementer to specify whether the week #s are displayed.
    • allow implementer to specify either a) when the weeks start (e.g. week 1 could be the first week in the semester) or b) that the week #s should be calculated using the ISO 8601 calendar system.

Storycard 10: Smart text recognition

  • Process text such as "next thursday" (potentially using a library such as: http://www.datejs.com/) into a date
  • Recognize multiple date formats (e.g. mm-dd-yyyy) and convert them to the default format (e.g. mm-dd-yyyy)