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

3 Answers 3


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.

enter image description here

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

enter image description here


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.


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.

enter image description here

  • Thanks for your reply. You provide a solution for a date picker suitable for exploring future dates, not past, as written in the question (disabling 5 days and than enabling the rest is problematic). Commented Jun 15, 2016 at 9:55
  • @MariaSegal Ah, thanks for that. Yes, I read it backwards. In that case, it would be a matter of disabling everything from 4 days ago into the future... or the opposite of the images, no? Or essentially, exactly like GA, but for 5 days ago.... so instead of tomorrow being disabled, everything for the previous 4 days would be. Either way, the UX is similar, it's just what gets disabled. Commented Jun 15, 2016 at 20:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.