Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript Mimics of the iPad's UI (specifically, UIDatePicker and UIPicker)

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

UIDatePickerUIPicker

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?

like image 251
Rudiger Avatar asked Oct 12 '22 08:10

Rudiger


1 Answers

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.

like image 57
theazureshadow Avatar answered Oct 14 '22 04:10

theazureshadow