I currently have a function that displays a datepicker when the user actively chooses "Custom range" instead of "Today" or "This week", like this:
The thing I'm uncertain of for now is the best conditions to display this box accordingly. Here are my potential ideas:
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.
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.
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.
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.