Android-Like Date Picker with jQuery mobile .2
In a previous post (https://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.
Todd M. Horst