Enable users to enter a date and/or time range.
Provide mechanisms that allow the user to select dates and times as opposed to forcing users to enter text (which is more error prone).
It is necessary for a range across dates or times to be entered.
Common scenarios include events, tasks, and appointments; as well as items usefully displayed in chronological or reverse-chronological order, such as blogs, photo uploads, and email messages.
If users are forced to use unfamiliar formats or syntax for date and time entry, or even familiar formats that don’t relate well to what the user is trying to accomplish, errors and frustration by the user becomes more likely.
For example, to allow a user to enter a date range for a hotel stay, it may be appropriate to have the user provide the arrival date and the number of nights they wish to stay, rather than providing both the arrival and departure dates. If instead, the user is interested in exploring options within a more flexible range of dates, it may be more appropriate to have the user provide two specific dates, representing the end points of the range.
The main goal is to allow the user to provide the date or time range in a way that minimizes the amount of thinking and/or effort required.
Prefer input mechanisms that allow the user to select dates and times over mechanisms that require data entry. Calendar-based selection input should be used rather than forcing people to enter text representations for dates. Likewise for time data, prefer mechanisms that allow users to select time components rather than forcing them to enter time data.
Use two date entry controls, one for each value in the range. Provide good defaults for both. The current date is usually a good one. When you enter a value in the first control, the second control’s default value should change. For example if you change the month in the first one, change the month in the second one.
Try to make use of existing data, and the context of the task being accomplished to reduce the amount of thinking and effort required by the user. For example, in the context of a user choosing dates for a hotel stay (so the context tells you it’s a minimum of a one night stay), once the user has already entered a date or time for the start point of the range, automatically move the end point of the range to the next day.
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
You can use the NetAdvantage for Windows Forms controls: WinDateTimeEditor and WinSchedule to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser under WinScheduleto see it in action.
You can implement this pattern using the NetAdvantage for WPF’s XamDateTimeEditor and XamMonthCalendar Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser under xamDateTimeEditorto see it in action.
The primary example is from Google Analytics. It uses a calendar together with text fields. You can set the values in either control. It shows the selected range clearly at the top.
You can use two Date Picker controls. In this example from Marriot’s hotel reservation website, the date picker is displayed when the text field gets focused.
This example from Ajaxorized shows a different way to select a Date Range. It allows selecting the range or moving the whole range. For example, you can select a 3 months range and then drag the whole selection and move it forward, to the next 3 months. It shows the da
Google Analytics also provides a similar way to select the range, but it adds traffic information to the time slider. This is a good solution if you want to show contextual data that helps the user select the range.
Yahoo Design Pattern Library, Calendar Picker