Need a consistent TimePicker gizmo for mobile web

Question

We have a mobile web site that requires users to enter a specific time value--basically in hh:mm form. We're having a great deal of difficulty with the consistency of displaying and entering time from various browsers.

In looking for existing examples, we keep encountering various sites that allow 'ball park' values for minutes--so for them, a dropdown with 15 minute (for example) increments is fine--but a dropdown with 60 values is ridiculous on any platform, mobile especially.

The HTML5 < input type="time" /> isn't getting us there. A standard text input isn't either, as it tends to cue the device to show the alpha keyboard, which doesn't have numbers on it. The HTML5 type="number" almost works, but for some Android browsers, which don't have the colon (:) on the numeric keyboard.

I'm well aware that we're in the land of chaos with mobile browsers, but does anyone have a good idea of what might function well for both Android and iPhone?

Note: I've tried googling, and checked out various jQuery plugins, and none provide a good user experience for mobile--and many are poor even for the desktop. Ideas?

Answer 1

I hate answering my own questions here, but it looks like Mobiscroll comes closest to solving the problem for our users. We also looked at the jQM-DateBox but felt that our users would not be comfortable with the hour value changing automatically when you roll forward past 59, or backward past 0.

In addition to this, we did evaluate using a jQuery Mobile select list on a standard dropdownlist, but it felt wrong as we used it, as it essentially pops a div on the page, and scrolling through that moves the entire page quite a bit. I think that one would be great for a few items, but not applicable to our user base.

Answer 2

I don't particularly like their approach, but I believe the Any+Time date/time picker would work reasonably well on a mobile device - it can be positioned statically and the aspect ratio and button sizes look Right.

That said, testing it on my iPhone shows that a few kinks need to be ironed out. Notably, after tapping a button in the picker widget, the "hidden" input field the picker populates is focused and the view moves around and the onscreen keyboard pops up.