Date Time Range Input

Example of the Date Time Range Input UX pattern.

Problem

Enable users to enter a date and/or time range.

Solution

Provide mechanisms that allow the user to select dates and times as opposed to forcing users to enter text (which is more error prone).

Context

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.

Rationale

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.

 

Implementation

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.

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 Time Range Input pattern is implemented in the ASP.NET WebDateChooser control. Check out the samples browser to see it in action.

Windows Forms

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.

WPF

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.

Examples

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.

http://quince.infragistics.com/10xh

Example of the Date Time Range Input UX Pattern Example of the Date Time Range Input UX Pattern

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.

http://quince.infragistics.com/1167

Example of the Date Time Range Input UX Pattern Example of the Date Time Range Input UX Pattern

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

http://quince.infragistics.com/111j

Example of the Date Time Range Input UX Pattern Example of the Date Time Range Input UX Pattern

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.

http://quince.infragistics.com/1199

Example of the Date Time Range Input UX Pattern Example of the Date Time Range Input UX Pattern

Sources

Yahoo Design Pattern Library, Calendar Picker

Tags

Data Entry, Form, Date Entry.