Archive for the ‘ jQuery ’ Category

Android-Like Date Picker with jQuery mobile

Newer Version:https://toddmhorst.wordpress.com/2010/12/30/android-like-date-picker-with-jquery-mobile-2/

I started working on a mobile web app using jquery mobile this week. I got to a point where I needed a date picker, and noticed that theirs isn’t done yet. In the experiments folder on git they seem to be basing it off of the date picker from jquery ui. Which looks out of place on a mobile browser.

Looking around I found the following site that has an iPhone like date picker. It works well, but could potentially give you invalid dates as it always allows 31 in the day selector without taking into account the current month your in.

http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

Since I’m testing on a droid, I noticed that their picker is simple and clean. I decided to make a web version using jquery mobile.

Here is my sample:
http://managingmeals.com/demos/datepicker/ (Sorry for the slow loading site, I couldn’t find a free place to host the demo, tips?).

Here is a picture:

Here is a pic on the real thing on android:

Here is the package:

http://www.mediafire.com/?in88b1f76bufyun

Reasons:

I’m hoping someone can take this sample and run with it. I’m definitely not a pro with jquery yet, and mobile isn’t even out of alpha. If users see this as well as the iphone replica we may be able to get some good options out there.

Future Fixes:

This page is horribly slow, I have it hosted locally and my droid still has a lot of lag. I would like to get rid of the date formatter and build that into the script. The external script is awsome if your doing a lot of different modifications, but im not.

Needs to be in a pop up similar to dialogs on a desktop, or list items in the mobile framework. I dont really like that dialogs in the mobile framework hide the text of the sceen, they seem more like new pages. Set and Cancel button would then need to work.