3

In our Java app, we let users see a full list of all events. Users need to filter the event list so that they see only the events they care about.

Most users are happy to use canned date ranges (today, yesterday, last 3 days, etc). However some users need to specify the start and end date of their range.

Currently we have this setup in a bar immediately above the list of events:

mockup of data filtering options

If the user picks something from the Date dropdown, the From and To boxes are populated automatically. If the user picks or types a date in either From or To (or both), the Date box shows the text Custom. This is not a pickable option though... it doesn't appear in the dropdown.

I am concerned that this is a non-standard way of handling this situation. Is there a more established way of letting users easily switch between a canned range and custom ranges?

Improve this question

5 Answers 5

Reset to default
2

Inline with other posts above I can't help thinking that Google have done this well in their Analytics console...

enter image description here

Whereby the user can select their date range from the calendar control (or type dates, in a variety of formats, into the text boxes.

However if they select anything but "Custom" from the Date Range dropdown control these options are disabled.

Have a play!

Improve this answer
2
  • Thanks. I'm picking this as the answer because your example has led me to my solution. I'll borrow lots of cool things that Google did. I like the error handling (the date box gets a red border if you enter nonsense)
    – Melanie Albrecht
    Jan 15, 2014 at 20:33
  • Is this really the best answer? I like the example, but this solution is quite old in comparison to other calendar controls. Just because Google uses this implementation, it doesn't mean it's correct for others.
    – erik_lev
    Jun 12, 2014 at 18:55
5

I'm currently implementing a date range picker like yours but with a few differences:

  1. I have "other..." as an option below the canned date ranges. This way people will know that they have more options and will choose that if their choice isn't in the list.

  2. The custom fields are hidden until "other..." is selected. This is just a design choice to make the filter clear from clutter.

  3. I don't use date pickers because I offer just months and the last 5 years. Picking dates is a little easier and quicker this way. But it depends on how precise you want it to have off course.

So before the custom option (Other...): enter image description here

And after: enter image description here

Improve this answer
1

For all the values you have currently in the dropdown, the From and To could be only text that is populated automatically. (i.e. Do not show them as boxes with a calendar icon next to them. Show them only as text)

However, you can add a Custom field in the Date dropdown. When selected, the From and To calendar boxes appear allowing the user to select the dates.

Beware of the following: Users selecting an To date > From date

So you need to have some error messages ready.

Improve this answer
1
  • Thanks for the reminder about error messages. I plan to start with just the red borders (as Google does) and then test to see if users get enough info from that alone.
    – Melanie Albrecht
    Jan 15, 2014 at 20:36
1

If the user selects today from the Date dropdown, “today” date appears in the Start Date field. Other selections from the Date dropdown can be e.g. Last week, Last month etc. After selection start and end date are populated automatically. Custom dates (as shown in the mockup) can be selected either by clicking the calendar either by typing in the fields. Action updates both, fields and calendar. If the user picks or types a date, the Date dropdown shows the text "Custom".

This solution is based on Google Analytics date range calendar and provides pre-defined ranges, custom selection and calendar view

enter image description here

Improve this answer
2
  • 1
    Can you add in some description to this to describe what this solution is and how it works? A picture on its own isn't really an answer, it's just a picture, but some description and reasoning will help aid understanding in what you're proposing.
    – JonW ♦
    Jun 12, 2014 at 9:15
  • 1
    Thank you, you are right. I've wrote a description and what this solution provides.
    – Stevy
    Jun 12, 2014 at 10:51
0

I don't think that there is really a standard way. We have this setup:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It presents a couple of canned ranges (for images to archive, in our case), and offers a 'custom' range. Only if the custom range is selected, do the from and to date edits (and for us: even time edits) appear. In our case we have a dialog, that uses a short animation to make space for the needed widgets for the custom range.

Note that the date edits don't have a calendar. Don't be confused by that, we have a custom date edit widget that allows you to type dates an almost any format, and that will suggest full dates that match in the dropdown under it. How the dates are interpreted depends on the system locale and the intended use of the date. That allows much more natural and quicker date entry than picking from a calendar we think.

Works well for us.

Improve this answer
1
  • Too right - there is not a standard solution yet! Maybe Google's approach will become the defacto std...?
    – Melanie Albrecht
    Jan 15, 2014 at 20:47

Your Answer

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

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