I'm working on some UI where you are able to select a time range for each day using dropdown time pickers. The thing is that it is valid to select a time from yesterday or tomorrow. For example, for Tuesday I could select 11pm Monday - 3pm Tuesday, or 1pm Tuesday - 1am Wednesday.

I want to keep the time picker compact so I'm not going to put the day name, e.g. "11:00 PM Monday"

Some options are to use something like "11:00 PM (-1d)" or "11:00 PM Mon" or "11:00 PM (pd)" for previous day.

What will be the easiest to understand solution that does not take up a lot of space?

Thanks in advance.


mgraham has a point about using the 24hr format, although I suppose this could be confusing for some users.

Regardless, I don't like the "(-1d)" idea - it'd probably require explanation to users, so from a user perspective you'd be better off using the three letter day abbreviation (e.g. Mon, Tue, Wed and so on).

Your question doesn't make it clear how finite the chosen time needs to be. For example, will it be valid for users to select 11:15pm? What about 11:10pm? If it's only on the hour, then you could get away with "11PM Mon" rather than "11:00 PM Mon".

However, if it's the same as in most cases I've seen, I suspect you would want them to be able to select times in at least 30min intervals and more likely 15min ones. So I think the safest most scaleable option for you and users alike is to use the "11:00 PM Mon" format. And this meets your criteria of being the easiest to understand solution that doesn't take up a lot of space, and it's the format I most often use.

| improve this answer | |

This is my take on your requirements:

I prefer 24-hour clock, and think that a range picker with two handles will match well here.

The intervals will be 15 min as @Monomeeth advised :)


download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |

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.