Child pages
  • Date Picker Storycards

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.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

Storycard 1: Allow user to select a date using a mouse

  • Pop-up a date picker when the user clicks inside the date text field
  • Display the dates in the displayed month as links
  • When user clicks on a date, display the date in the date text field in the localized format and close the date picker popup

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

  • Provide a month dropdown and a year dropdown 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.
  • Provide "Today's date" link at the bottom of the calendar. 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

  • 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). Enable the integrator to configure the calendar Monday is displayed on the first column
  • For the weekend days, use faint grey as the background colour
  • Indicate the potential selection: Highlilght the dates in light blue upon moused-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
  • Indicate today's date in the calenar: 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

Storycard 4: Display additional information in the calendar using visual styles to help date selection 

  • Indicate previously selected date: When user opens one of a series of date fields, indicate other related dates on the calendar (if they are selected) with white text on dark grey background (e.g. Open date, Due date, Accept until date).
  • Disable irrelevant dates: Display the irrelevant dates (may depend on the context and selections made on other fields) in grey and make them non-clickable
  • No labels