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.
Very good stuff!
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/
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
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.
Yeah, just checked it out. its no good on a mobile environment. Takes up to much screen, and the buttons are way to small.
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
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.
pressing down focus on the text field. always.
painful with damn screen keyboards popping in and out.
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?
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.
I truly beloved your website!
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???
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
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
go for it. though i would use datebox as a base not this. this was never fully developed
Love your website for the ideas it gives me.
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;)