Are dropdowns styled like select menus bad?

Question

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?

Answer 1

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])

Answer 2

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.

Answer 3

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.