5

Does anyone know a way to mimic the UIDatePicker and the even more general UIPicker iOS controls in HTML & JavaScript?

UIDatePicker UIPicker

Does anyone know of a solution like this? I've seen JavaScript mimics of other iPhone/iPad controls, such as the UIPopoverController. I would really like to be able to offer this way of entering dates (compared to solutions like jQuery UI's datepicker). It looks like it would be easy to use both on a mouse scroll-wheel and on the iPad. So, any advice?

Rudiger
  • 6,634
  • 9
  • 40
  • 57

3 Answers3

2

One reason all these strange widgets exist is because typing on touchscreens is annoying. You probably wouldn't want to use this sort of widget on desktop for the same reason that very few people like to draw pictures with their mice: the control you get with a mouse isn't really the same as the control you get with a touchscreen.

For that reason, libraries that have implemented functionality like this do it specifically for mobile, and do not ensure compatibility with older browsers such as IE6. If you only need to support good Webkit browsers, and you don't mind using a large framework for this purpose, Sencha Touch's Picker works well (see this page for an example). Sencha's doesn't offer mousewheel support.

I don't know if anyone has implemented one outside of a large framework, but it wouldn't hurt to look around.

--- EDIT ---

A solution listed in a previous StackOverflow question (Date Picker for iPhone Web Application) was chosen as the answer, but it's only for mobile — perhaps only for iPhone. You could look at the code and write one that would work on desktop.

Community
  • 1
  • 1
theazureshadow
  • 9,499
  • 5
  • 33
  • 48
  • 1
    I'd suggest that it's more because it looked cool and showed off what they could do with the touchscreens. Setting a timer on my android (which fortunately doesn't use the metaphor as much as iphones, but unfortunately does use it a bit) can take far longer than on my old nokia where I could just type `3` and `0` rather than spin to the opposite side of a 60-element wheel, spin a bit more, oops back a bit, now slowly, got it. Some applications do offer a number keyboard for such things, and I can't say I find pressing it two or three times more annoying than fiddling with the wheels. – Jon Hanna Aug 02 '12 at 11:22
  • @Jon: It's a fair point, though I would personally still prefer to select the date rather than typing it. You don't have to worry about what format is expected (day/month order) or hitting special keys (date separator). It's a much more controlled experience. – theazureshadow Aug 02 '12 at 17:12
  • Dates aren't as bad (shorter range) though at pad size a calendar-picker (for unambiguous entry) combined with a textbox (for quick entry) wins to my mind. At phone size, it's a closer call. For picking minutes, a designer's showing off is being put above my convenience as a user. – Jon Hanna Aug 02 '12 at 18:19
1

@theazureshadow has a point that this is probably a bad idea for a mouse-based experience.

For anyone looking to do this in a touch-screen browser (smartphone or tablet, iOS or Android), and from my research, this is a great solution : http://demo.mobiscroll.com/. (Found in this answer)

If you only target iOS (iPad and iPhone), this code has a better native iOS feel : http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

Community
  • 1
  • 1
Max
  • 1,054
  • 1
  • 12
  • 20
1

I've been looking for the same thing today and found this pretty good implementation:

http://marinovdh.wordpress.com/2011/09/14/use-the-iphone-uipickerview-control-as-a-selectbox-on-your-website-with-jquery/

There's a zip file with a working demo you can play with. I didn't create this, but I'm going to modify it for a project I'm working on.

jamesnotjim
  • 575
  • 7
  • 17