How to design a good date picker for historical data?

Question

1. The user can pick a date range (0-30 days) and be able to drag it or move it across a 2 years
2. We can only show historical data from 5 days ago or older

Answer 1

Can you have a graphical representation of your data?

The UX.SE reputation graph lets you click and drag a section of a smaller graph for it to be displayed in a larger graph. You'd need to restrict the selection on the smaller graph to be up to 30 days, but then it's very easy to select any one section within the last 5 years.

Also Google Finance e.g. for the Apple stock price allow you to select a range and then drag that around:

Answer 2

First, you need to decide what a date range of zero days means. Does that mean a single day? If a single day is represented by 1, your range would be 1 to 30 days. It may seem trivial but you don't want the user to be confused.

My approach would be two read only windows containing the start date and end date, with a spinner box showing the number of days (inclusive). Clicking on the start or end dates would display a calendar to select the start date. There would of course be buttons to enter data and cancel the operation. The calendar object would be programmed so that you can't navigate to disallowed values (less than three days ago or more than two years.)

Since the range is only two years, back and forward arrows for the month should be sufficient. You wouldn't need a spinner for the year. You might want buttons for going to the first or last month.

You might want a slider/range box that would show where the period of selected days is within the two year range. Moving the section of the box showing the range could open the calendar box with the months changing in correspondence with the selection on the range bar. I wouldn't want to try selecting the start date or duration from the range bar since that would be difficult for the user. Selecting one of twenty four positions (months) on the slider wouldn't be bad. Selecting one of 730 days would be awkward.

Starting with these considerations, I would prototype a few versions of the picker and let the end users try them. Further details would probably depend on the nature of the rest of the application.

Answer 3

Honestly, I like how Google Analytics handles their date picker. However, you'd just need to add the drag and drop functionality and the inactive dates older than 5 days ago.