1

I am creating a date-time picker in which you'll be able to select a date, or a range of dates, or a date + time, or a range of date + time, or time, or range of time. The date picking is already done, but now I am dealing with picking time and minutes and I can't find something satisfactory.

I am working on a web project which will accessed by users ranging from experts to ones with basic informatics knowledge.

I have checked some famous and widely used ideas, such as the time picker from Material UI, but that doesn't serve me because I find the 24h clock a bit confusing, since it has twelve hours in an outter clock and the next twelve hours in an inner clock; also, for minutes, you need to drag the clock pointer, which seems to take too long and requires precision. Another solution would be the iOS mobile select, one for hours, another for minutes, but this ones needs a bit of searching to get to the wished target.

Currently, I have this for hours, and for minutes it's something similar but with a longer list: 00-59.

Current solution

Well, I can't find the idea, but I'd love suggestions.

Improve this question

2 Answers 2

Reset to default
1

To me that looks unnatural and (sorry) horrible. I would use a tumbler or spinner. Two examples are below.

Bootstrap

Bootstrap

HTML5

HTML5

Improve this answer
3
  • Don't be sorry, I also am... Commented Aug 18 at 16:46
  • @BernardoBeniniFantin This proposed solution is quite common and it allows users to fill in the value manually. It wouldn't surprise me if that is even the preferred way in general. You will want realtime validation and/or filtering (e.g. anything higher than 23 becomes 0), but that should be easy to implement. Commented Aug 19 at 13:09
  • I also think this is the most convenient option, at least for input on a big screen (computers and maybe tablets, for example), as well as a recognizable one. I just would like to contribute an example that I think does it well: int.bahn.de/en?dbkanal_007=sprachauswahl-en (the date and time picker appears by clicking under the start destination). Commented Aug 19 at 18:08
0

I think the answer lies in finding a simple, elegant, and straightforward time picker. There are several examples online, but the simplest, in my opinion, is a toggle with AM/PM and sliders for the hours and minutes showing the result on a display.

time picker

Improve this answer
1
  • That's nice, but, since Portuguese speakers don't use AM/PM, it's very unusual to have that, so I need the 24h available without needing to toggle the period. Also, the minutes slider requires too much precision. I guess a select will be the best option. Commented Aug 19 at 12:28

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.