As you can see below, I'm thinking of using a multi-function dropdown styled as a select menu in order to let users set a time range.

My question is : from a UX perspective, is it wrong to do so?

Is it a common practice?

edit starts here --->

Okay, as I'm reading the answers you all kindly provided, I've come to the conclusion that my question was poorly crafted from the beginning.

What I need to know in fact is the following :

Is it ok to use a dropdown styled like a select menu in order to display a calendar once the dropdown is opened?

I mean, an average user might expect a list of items and not a calendar as the content of a select menu.

What is the consensus?

  • Look here (kayak.com )how to do it right Jul 14, 2014 at 10:11
  • @SashkoValyus In the Kayak UI, the dropdown isn't styled like a select menu ... so I guess this is what you mean by "doing it right"? Thanks for confirming. (see the edit question)
    – majimekun
    Jul 15, 2014 at 2:36
  • Interesting to see interface designs for other cultures/languages. We should have more on UX StackExchange!
    – Michael Lai
    Jul 15, 2014 at 6:30

3 Answers 3


My short answer is that I think you could do better by either allowing the user to use the "picker" to select a date range, or use the calendar to select a range of dates. That is the best way to do it if they are allowed to freely select a range of dates, like for hotel or round-trip flight booking.

If there are preset ranges that the user can select from, you may be able to use a dropdown. If this is the case, I would find a way to make it less overwhelming. One solution may be to name the ranges if applicable, (like Session 1: [daterange])

enter image description here

  • I've edited my question above. Sorry for the confusion. Actually, the main issue is about the use of a fake select menu that displays a calendar instead of a list of items.
    – majimekun
    Jul 15, 2014 at 2:38
  • He is right. It is actually pretty common to see a Dropdown style selection box open an interactive box with varied content that is not just lists. If you have presets, the best solution is something like this: dangrossman.info/2012/08/20/… (scroll to example, predefined ranges) Presets come first, then the calendar opens as a secondary option for free-form range.
    – Pdxd
    Aug 17, 2014 at 15:50

it might be overwhelming to the user. maybe you could have a tab like option on the top letting the user decide if they want to use calendar or select a range.

  • You're totally right, the content of the dropdown was way too crowded. I will only use the calendar and remove the history listing.
    – majimekun
    Jul 15, 2014 at 2:41
  • its completely fine to use a calendar control on a drop down. flight,tours,hotel booking websites use this all the time and most people should be fine with it
    – Blue Ocean
    Jul 15, 2014 at 2:47

There are two elements that you are working with here. The first is the interface element that allows the user to select from a pre-defined list of date ranges, and the second is the interface element that displays the selection so the user has the right context of the date range.

Looks to me like you have two options:

  1. Display them separately as you have done, but ensure that the users know which one is used to provide input and which one is to provide output. If you want the calendar to also be used to provide input, then try to use a consistent visual and interaction style (plus some contextual help might be useful here) to convey this to the user.
  2. Combine them into one user interface element, which means you can either ditch the calendar or keep it depending on how the users react to it. I think this is a more complex UI component to design, so you are better off to err on the side of caution and try to make it as simple as possible to use.

I haven't seen calendar widgets that allow you to make a range selection, whereas I have seen selection input that is used to change the calendar appearance. It would be interesting to see what the reaction is when you do get to test it.

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.