I currently have a function that displays a datepicker when the user actively chooses "Custom range" instead of "Today" or "This week", like this:
enter image description here

The thing I'm uncertain of for now is the best conditions to display this box accordingly. Here are my potential ideas:

Solution #1

Show the box when "Custom range" is selected, and hide it when browsing other values of dropdown or when pressing "Done" to submit it.

If the user wants to change the value again, they hover the dropdown and the box falls down again.

This approach might be annoying if you accidentally hover the box and have to manually close it again.

Events: mouseenter

Solution #1b

Same as previous, but the datepicker till fade out and hide if you don't hold the mouse over that box within X amount of seconds/milliseconds.

Events: mouseenter, mousemove

Solution #2

Have a button next to dropdown (hide when other value chosen ?) and simply press it to open/close the datepicker.

This is quite clear, I suppose. However I'm not sure how I'm supposed to deal with the toggle button's behavior.

Events: click

If you have any other nice approach, I'd love to hear it.

Please refer to a solution and motivate what makes it more ideal than the rest.

  • Can you use a click event directly on the textfield part of the date picker for Solution #2? From my experience that's become the standard method of interaction for that control.
    – Daniel
    Jan 24, 2014 at 16:08
  • I'm trying to avoid a text field, and display the dates in the <option> of the dropdown. Jan 24, 2014 at 21:20

1 Answer 1


Firstly I think you mean a date range picker.

I think you can learn a lot from the implementation of Dan Grossman's bootstrap daterangepicker

Datepicker with normal range Here only the range of dates is shown in the case of a standard set like This Week. But won't flood the user with information if he just wants to select a basic daterange.

Datepicker with custom range On clicking the custom range button. It opens the range for him to select.

Make it as simple as possible and you won't go wrong.

  • +1 I love this widget. It allows users to select a default first and select Custom if they need a different date.
    – Pdxd
    Mar 26, 2014 at 17:47

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.