3

I have several form controls on a list view that allow for filtering criteria on certain dates. We'd like to allow our customers to select between specifying an exact date or specifying a date range that the criteria could fall between.

The best I can come up with is making it a two-part form control with the first part as so: step one

If "exact date" is selected, the radio buttons are replaced with:

exact date form

If "between dates" is selected, the radio buttons are replaced with:

between dates

This definitely works, but feels like a lot of fields. Are there other options that might express the form control in a more compact or simple way?

  • If the user mistakenly selects "exact date" how does he change his selection? – Mayo Dec 7 '16 at 18:03
  • why replace them? Why not leave the date field invisible unless the right radio button is checked? Think the "other (please specify)" option many forms use. – FirstLastname Dec 7 '16 at 18:11
  • That's a good point. That definitely makes more sense and I'll do that if I end up going with this format. I was just wondering if there aren't any other common patterns for this form control. – Andy Dec 7 '16 at 18:20
4

Some flight ticket searching websites face a similar issue this way:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The Return input is not actually disabled, when you click it then you can select a date. In your case this might work in a similar way.

The idea in your case is to make one of the inputs valid for both situations. The starting date and the exact date could probably be it. The input for the finishing date is always visible so if left empty it is an exact date, if selected then it implies there is an end date. This way you avoid an extra step of preselecting the radio buttons. Also make sure that there is a way to go back to make the End date input null again.

  • Well put, I think you explained the functionality that must occur exactly right. I like this example better than the one I came up with. Thank you! – Andy Dec 7 '16 at 20:54
  • I am glad it could help :) – Alvaro Dec 7 '16 at 20:56
  • @Alvaro, nice answer -- where were you when I ask this question? ux.stackexchange.com/questions/95655/… -- you are using a “placeholder as a default value” in this example. Maybe you can share your insights using them? – Tim Grant Dec 8 '16 at 1:04
  • I've been active here only the last month and a half or so :p I left an answer with some thoughts in your question. – Alvaro Dec 8 '16 at 9:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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