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.

  1. Nice Sharing Sir 🙂

    • Nithya Krishnan
    • April 5th, 2011

    Hai,

    I was able to implement android style datepicker is there is any timepicker.i need a timepicker using jquery mobile.please help

    Regards,
    Nithya.

    • Todd Horst
    • April 5th, 2011

    Sorry, at this point its only a date picker. But using the same methodology you could change it to be a time picker. Perhaps when they release a final version, I will also do a time picker.

      • Yura
      • July 8th, 2011

      And where is your time picker version?

      • They still havent released final version of jqMobile. There is a datepicker that also has a time picker over at http://dev.jtsage.com/jQM-DateBox/. He very loosely based his ideas on mine, and its much better in every aspect. My idea was to create something as a proof of concept and to get better programmers ideas flowing. Im glad that jtsage has responded with his offering.

    • Bg
    • May 13th, 2011

    Awesome, Thank You!

  2. Good Implementation
    Thanks for sharing

  3. Check out my implementation of an Android-style datepicker for jQuery Mobile, called Mobi Pick

    http://mobipick.sustainablepace.net/

  4. Hi there, i read your blog occasionally and i own a similar one and i
    was just curious if you get a lot of spam comments?
    If so how do you reduce it, any plugin or anything
    you can suggest? I get so much lately it’s driving me insane so any support is very much appreciated.

  5. Its not my first time to pay a visit this website, i am
    visiting this site dailly and get nice facts from here everyday.

  6. I’m gone to tell my little brother, that he should also go to see this web site on regular basis to take updated from newest reports.

    • Anurak
    • August 28th, 2013

    Thank you

  7. I do agree with all the ideas you have presented on your post.

    They are very convincing and will certainly work. Still, the posts are too brief for starters.

    May you please extend them a little from subsequent time?

    Thank you for the post.

  8. May I just say what a comfort to uncover a person that really knows what they are discussing
    online. You definitely realize how to bring an issue to light and make
    it important. More and more people really need to read
    this and understand this side of the story. I can’t believe you’re not more popular because you
    surely possess the gift.

  9. Please let me know if you’re looking for a article
    writer for your blog. You have some really great posts
    and I think I would be a good asset. If you ever want to take some
    of the load off, I’d love to write some content for your blog
    in exchange for a link back to mine. Please shoot me an e-mail if interested.
    Many thanks!

  10. this date picker possible with query.mobile-1.4.2

  11. Thank you for the auspicious writeup. It in truth used to
    be a enjoyment account it. Look complicated to more delivered agreeable from you!
    However, how could we keep in touch?

  1. December 30th, 2010

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: