I want to allow the user to either filter by a prefixed time or by specific time in a faceted menu. the option I am showing here is a bit awkward. enter image description here


You could fit this into one dropdown, with a 'Custom' choice at bottom. The user selects and gets a date range picker:


download bmml source – Wireframes created with Balsamiq Mockups

Since you don't have a lot of horizontal space in the design, you could show the range right below the dropdown, so they see the results of their choice right next to the 'Custom' label.

Here's another take with a bootstrap date range picker. You'll see they have canned ranges along the right, and calendars to the left:enter image description here

In this model, you have the date span inside the input, rather than below (from my example sketch), and you have the calendar icon as a signifier as well.

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.