2

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
Datepicker.

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 '14 at 16:08
  • I'm trying to avoid a text field, and display the dates in the <option> of the dropdown. – Robin Castlin Jan 24 '14 at 21:20
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 '14 at 17:47

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.