Date Picker
Problem
Dates are notorious for having many possible representations varying by locale and personal preference.
Solution
Provide a visual representation of dates in the familiar calendar format to facilitate people entering dates in a consistent format.
Context
- You have mostly new or occasional users who may need help entering dates in a format your system can reliably interpret.
- Typical usage is more mouse-driven than keyboard-driven (using a date picker with a keyboard can be challenging).
Rationale
Date pickers provide a familiar calendar metaphor that resonates with most people and it helps them to think about dates in terms of where they are in the month and week. They help structure the date input in a way that your system can interpret reliably, thereby reducing validation errors caused by unrecognized date formats, and they are easier to use than multiple drop down choosers with, e.g., month, day, year.
Implementation
As with most complex controls, it is often your best bet to look for third parties who have already implemented the control for your platform (if the platform itself doesn’t support it). But the key elements of a date picker are the month view (as a calendar), the ability to select a day in a month, and the ability to navigate between months.
It is fairly common to only show the date picker on demand as a Drop Down Chooser. This is because there is no need to take up all that space and attention except when the person wants to actually pick a date. Similarly, the affordance to indicate the picker is usually a calendar icon with a down arrow, though both are optional if, for instance, you activate the picker when the field is given focus, but showing at least one of the affordances is helpful unless your users expect the drop down.
When showing the calendar, it is common to show the month for the currently-selected date and highlight that date in the calendar itself. If no date is selected, showing the current month is a good default, unless you can infer a better starting point based on the context for the date being selected. It can be helpful to show the current date highlighted as well to provide a bit of extra orientation.
In terms of changing months, it’s pretty common to show left and right arrows, with left meaning prior and right meaning next to let people navigate between months. It is also fairly common to show a Drop Down Chooser for changing the year, though there are better alternatives such as that shown in the Vista system clock example.
Clicking on a day in the drop down selects that date and closes the drop down; closing when a user clicks outside of the calendar or tabs away from the field can be a good option as well, but definitely provide a close command to hide it if you don’t do that.
You may also want to consider, if you have confidence in your target audience or in your system’s ability to cope with unexpected formats, allowing people to enter a date directly in addition to the date picker. More advanced users and cases of high data entry (where context switching between mouse and keyboard are costly) should be able to bypass helpers like the date picker.
Similarly, depending on the kind of date (such as date of birth), date pickers may not be the optimal choice due to the amount of effort to navigate to a distant date in the past. In those cases, it may be better to provide multiple drop down choosers for month, day, and year unless you can provide an easy way to navigate larger time spans. Often letting people type in their DOB directly is the best option.
Help Me Get There
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
ASP.NET
Date Picker pattern is implemented in the ASP.NET WebDateChooser and WebCalendar controls. Check out the samples browser to see it in action.
Windows Forms
You can use the NetAdvantage for Windows Forms controls: WinDateTimeEditor to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser under Editors in Columnsto see it in action.
WPF
You can implement this pattern using the NetAdvantage for WPF’s XamDateTimeEditor Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser under xamDateTimeEditorto see it in action.
JavaServer Faces
Use the ig:dateChooser for this pattern. See an example here.
Examples
This calendar helps in selecting the whole week if the user wishes to, also multiple weeks can be selected in a month
http://quince.infragistics.com/11dx
The primary example is from Microsoft Office and shows their date picker appointments.
http://quince.infragistics.com/11ft
The Vista system clock, although not a date picker for date entry, shares common features and illustrates a good approach to changing months, years, and even decades. It starts out showing the current month and if you click the month, it zooms out to the year; if you click the year, it zooms out to the decade, and if you click the decade it zooms out showing decades surrounding the current one. You can drill back down the a calendar month view fairly quickly for a different century (if you wanted); this is far superior to switching to different years using the single month ahead/back arrow buttons common to most date pickers, but it does require extra work to implement.
http://quince.infragistics.com/119t
The Yahoo Travel site automatically displays the date picker when the date fields get focus or when you click the calendar icon. It displays two months, as it assumes that’s where you most probably want to start your trip. The current date was December 24th, and it did not display that day as the start date. The selected date is displayed with a green background, and when you hover over a date, it highlights it. You can directly type the date if you want.
http://quince.infragistics.com/10wr
Google Calendar does not display the calendar icon, and it automatically displays the date picker when the control gets focus. It shows weekends in a different color, as in the context of a calendar you probably want to know when weekends are.
http://quince.infragistics.com/116j
This example from the Infragistics ASP.NET WebDateChooser overcomes the difficulty of selecting longer time spans by providing a drop down chooser for both the month and year. It also shows the current date at the bottom and will circle that date when it is in view.
http://quince.infragistics.com/11df
Sources
Yahoo Design Pattern Library, Calendar Picker
Tags
