Android-Like Date Picker with jQuery mobile .2

In a previous post (http://toddmhorst.wordpress.com/2010/12/24/android-like-date-picker-with-jquery-mobile/) I showed a concept for a date picker for jQuery Mobile. It didn’t work, but I had most of the gui done.

Here is my current 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 the current download:

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

The goal is to get this look (taken from android):

Here is the current look of my app (looks slightly better on android):

Changes since .1:

  • Modal window
  • Set/Cancel work
  • Theme tweaks
  • Centers dialog with orientation changes
  • Button responsiveness (changed from click to tap), this was the slowness i talked about last time. It turned out that removing the date format lib didn’t affect the speed at all.

Future Changes:

  • On a desktop, some browsers show scrollbar on up/down buttons. Need to hide overflow.
  • there should be validation, as users type text into the text boxes
  • currently we roll the dates, so date is 12/31/10, add a month, it takes you to 1/31/11, it shouldnt
  • If there is a value in the text box when you launch the datepicker, start from that date
  • if the keyboard is shown and its landscape, just show the 3 text boxes, or scroll to them
  • if the keyboard is shown and its portrait, lengthen page, move dialog down, and scroll down to hide title bar

Reasons:

I’m still 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 (talked about in last post) we may be able to get some good options out there.

Im not sure what direction jquery mobile will go with a datepicker, who knows maybe they can do something similar and replace this altogether.

 

Side Note:

I tried using the dialogs built into jQuery Mobile, they are separate pages. I didn’t spend a lot of time on it, but i couldn’t get the js to work on the dialog. After that i would need to update the parent page with the date value, so those 2 hurdles were enough for me to go in another direction, at least for now.

    • Piotr
    • January 15th, 2011

    Very good stuff!

    • Spir
    • February 4th, 2011

    Not as good as your but jQuery Mobile Alpha 3 comes out with a datepicker experiment :
    http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/

      • hg
      • April 16th, 2012

      shits busted like crazy don’t work for crapp you need a lot of extra js just to make it cooperate a little and it is hard to style without breaking it

  1. I did see that today. However it doesn’t render in Firefox or chrome, and i don’t actually own a good phone. I’m doing the dev for work, and haven’t gotten my hands on the test phone.

    In any case my plan still sticks, waiting for at least beta, possibly 1.0 before i dive into this head first.

  2. Yeah, just checked it out. its no good on a mobile environment. Takes up to much screen, and the buttons are way to small.

    • Nithya Krishnan
    • March 24th, 2011

    Hi,

    I am in need of date picker for mobile app.i have implemented your datepicker code.it is not properly displaying the image.could you please help me to solve .

    Thanks & Regards,
    Nithya

    • Todd Horst
    • March 24th, 2011

    Is this a mobile website, or a mobile app. If its a mobile app then this is not what you want. Use the native controls.

    If its a mobile website then short answer is no i cant help.

    Long answer is that this is just a prototype, not even in alpha stage. Once jquery mobile becomes stable and as time permits i will come back to this, but in the mean time it doesn’t make to much sense to build on a moving base.

    If you look at the code its actually pretty simple. I would encourage you to either start from scratch or to continue on with my work. And of course, if you get something that works well, publish it so others can use and enhance it.

    • gabe
    • May 10th, 2011

    pressing down focus on the text field. always.

    painful with damn screen keyboards popping in and out.

  3. Using this control on the Android 2.2 and 2.3 device. Works well!

    I removed the input control and made it a label to avoid the keyboard popping up. This is sufficient in my app. The only PROBLEM: The events fire on the underlying controls as well, i.e., if there is button underneath the control, it triggers as well. I am doing something wrong?

    • Vanishri
    • October 6th, 2011

    Hi,

    its really nice stuff to use , but here i am getting warning og serialize is not a funtion upon submitting form , in which i am including the inputs of date and time. can you please guide me what might the reason is for the same.

    • -
    • December 18th, 2011

    I truly beloved your website!

    • sathya
    • February 9th, 2012

    The date picker works well.. but to choose date which is 30 years back.. then i need to do 30 taps on mobile.. which is painful.. Is there way to hold key option so that it will increase the fields like spinner???

  4. you should edit the textbox. This was only a proof, you should be using

    1: http://dev.jtsage.com/jQM-DateBox/demos/android/ – This was loosely started on my thought process and what i would recemend.

    Or

    2:http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/ – this is jquerys attempt

  5. i was thinking would you be interested in this being built into AppBoilerplate, i want to make a hybrid between this and the iphone date wheels and show the right one dependant on the platform (so this on android, wheels on iphone)

    https://github.com/jonathan-fielding/AppBoilerplate

  6. go for it. though i would use datebox as a base not this. this was never fully developed

  7. Love your website for the ideas it gives me.

    • versteeg.joh@gmail.com
    • May 23rd, 2012

    If you searching for free hosting place, you can use dropbox is you only use html/css/js (client side) en share the public link;)

  1. January 10th, 2011
  2. March 3rd, 2011
    Trackback from : dev.JTSage :: jQM-DateBox
  3. May 14th, 2011
  4. May 29th, 2011
  5. October 2nd, 2011
  6. December 4th, 2011
  7. December 29th, 2011
  8. January 24th, 2012
  9. May 9th, 2012

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 )

Connecting to %s

Follow

Get every new post delivered to your Inbox.