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;)
The following code creates a fairly good date picker:
function MobileDatePicker(theDiv)
{
this.MonthAbb = new Array
(
“Jan”,
“Feb”,
“Mar”,
“Apr”,
“May”,
“Jun”,
“Jul”,
“Aug”,
“Sep”,
“Oct”,
“Nov”,
“Dec”
);
this.pickerDiv = theDiv;
this.pickerHtml = “”;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” +“;
this.pickerHtml +=” +“;
this.pickerHtml +=” +“;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” Jul”;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” 7″;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” 2011″;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” -“;
this.pickerHtml +=” -“;
this.pickerHtml +=” -“;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
this.pickerHtml +=” “;
$(“#” + this.pickerDiv).html(this.pickerHtml);
this.spnMonth = “#spnMonth_” + this.pickerDiv;
this.spnYear = “#spnYear_” + this.pickerDiv;
this.spnDay = “#spnDay_” + this.pickerDiv;
this.spnFullDate = “#spnFullDate_” + this.pickerDiv;
this.tblMP = “#tblMP_” + this.pickerDiv;
this.ddCurrent = new Date();
var _this = this;
$(“#aOne_” + this.pickerDiv).click(function(event)
{
_this.SetPickerDate(1);
});
$(“#aTwo_” + this.pickerDiv).click(function(event)
{
_this.SetPickerDate(2);
});
$(“#aThree_” + this.pickerDiv).click(function(event)
{
_this.SetPickerDate(3);
});
$(“#aFour_” + this.pickerDiv).click(function(event)
{
_this.SetPickerDate(4);
});
$(“#aFive_” + this.pickerDiv).click(function(event)
{
_this.SetPickerDate(5);
});
$(“#aSix_” + this.pickerDiv).click(function(event)
{
_this.SetPickerDate(6);
});
_this.SetPickerDate(0);
}
MobileDatePicker.prototype.HeaderCss = function(attr, val)
{
$(“#ppppHeader”).css(attr, val);
}
MobileDatePicker.prototype.Css = function(attr, val)
{
$(this.tblMP).css(attr, val);
}
MobileDatePicker.prototype.GetIndexForAbb = function(abb)
{
for(var i = 0; i < this.MonthAbb.length; i++)
{
if(this.MonthAbb[i] == abb)
return i;
}
}
MobileDatePicker.prototype.SetPickerDate = function(dm)
{
var mnthIndex = this.GetIndexForAbb($(this.spnMonth).html());
var d = parseInt($(this.spnDay).html());
var y = parseInt($(this.spnYear).html());
var dd = new Date();
dd.setMonth(mnthIndex);
dd.setFullYear(y);
dd.setDate(d);
switch(dm)
{
case 1:
dd.setMonth(mnthIndex + 1);
break;
case 2:
dd.setDate(d + 1);
break;
case 3:
dd.setFullYear(y + 1);
break;
case 4:
dd.setMonth(mnthIndex – 1);
break;
case 5:
dd.setDate(d – 1);
break;
case 6:
dd.setFullYear(y – 1);
break;
default:
dd = new Date();
break;
}
this.ddCurrent = dd;
$(this.spnMonth).html(this.MonthAbb[dd.getMonth()]);
$(this.spnDay).html(dd.getDate());
$(this.spnYear).html(dd.getFullYear());
$(this.spnFullDate).html(dd.toLocaleDateString());
}
Hello, I like this calendar! Good work!
I noticed that it is zoom doesn’t happen even when tapping quickly on the controls. How did you block the zoom?
Pretty component of content. I just stumbled upon your weblog and
in accession capital to assert that I get actually loved account your blog posts.
Anyway I’ll be subscribing on your augment and even I achievement you get entry to consistently quickly.
I want to to thank you for this very good read!! I certainly enjoyed every bit of it.
I have got you bookmarked to check out new stuff you post
Can I simply say what a reduction to find someone who really knows what
theyre speaking about on the internet. You undoubtedly know find out
how to deliver an issue to light and make it important.
Extra folks must read this and perceive this aspect
of the story. I cant consider youre not more standard because
you positively have the gift.
why you are js.js here?
sorry what is the use of js.js file?
Hey!
With this particular write-up you sum up a couple of the more noteworthy
pieces of information!! Simple to read and inclusive
of important detail..
Many thanks for posting Android-Like Date Picker with jQuery mobile .
2 Todd M. Horst.
We are a group of volunteers and starting a new scheme in our community.
Your site offered us with valuable info to work on. You have done a
formidable job and our whole community will be thankful to you.
It’s remarkable to visit this web site and reading the views of all mates concerning this article, while I am also eager of getting knowledge.
Hello there, I found your blog by the use of Google while looking for a related topic, your site got
here up, it appears to be like good. I have bookmarked
it in my google bookmarks.
Hi there, simply changed into aware of your weblog thru Google, and
located that it’s truly informative. I’m gonna be careful for brussels.
I will be grateful in case you continue this in future.
Many other folks shall be benefited out of your writing.
Cheers!
Hello there, just became alert to your blog through Google, and found that it is really informative.
I am gonna watch out for brussels. I’ll be grateful if you continue this in future. Many people will be benefited from your writing. Cheers!
good
Valuable info. Lucky me I found your web site by accident, and I am shocked why this
accident did not happened earlier! I bookmarked it.
Aw, this was an extremely nice post. Spending some time and actual effort to generate a really good article… but what can I say… I hesitate a whole lot and don’t seem to get nearly anything done.
Hey, I think your site might be having browser compatibility issues.
When I look at your website in Opera, it looks fine but when opening
in Internet Explorer, it has some overlapping. I just wanted to give
you a quick heads up! Other then that, awesome blog!
Great post! We are linking to this particularly great content on our website.
Keep up the great writing.
Hello, i read your blog from time to time and i own a similar
one and i was just curious if you get a lot of spam
responses? If so how do you prevent it, any plugin or anything you can
recommend? I get so much lately it’s driving me insane so any help is very much appreciated.
Helpful info. Fortunate me I found your web site accidentally, and I am shocked why
this accident didn’t happened earlier! I bookmarked it.
Hello Dear, are you truly visiting this web site regularly, if so after that you will definitely get good experience.
Good day! I could have sworn I’ve visited this site before but after going through many of the posts I realized it’s new to me.
Anyhow, I’m definitely delighted I discovered it and I’ll be bookmarking it and checking back often!
I truly love your website.. Great colors & theme. Did
you create this amazing site yourself? Please reply back as I’m trying to create my own website and would like to find out where you got this from or just what the theme is called. Cheers!
Then click on the button with the header “custom” and type %postname% in the box
there. The rankings that you achieve through SEO will appear on the Search Engines.
This should be handled on a per page (not per site basis) via the CMS.
Thanks for the great post – it has helped in a couple of our projects
Fantastic post however , I was wanting to know if you could write a
litte more on this subject? I’d be very grateful if you could elaborate a little bit further. Cheers!
Now that your phone willreceive any damage during the course of the
last big Samsung smartphone, the blackberry S4.
Disabling Flash helped — as it usually does — but out-of-the-box surfing wasn’t quite all we’d hoped
it would be wise to purchase yourblackberry Tab Casesfor protection.
7 on Friday when the annual IFA electronics show started in Berlin.
With inbuilt screen capture and picture editing app
you can edit media on your device. The HTC sensation doeshowever
boast stereo sound recording when shooting video footage.
I just couldn’t depart your web site before suggesting that I
actually enjoyed the standard information a person provide for your visitors? Is gonna be back often in
order to check up on new posts
Hello! This is my first visit to your blog!
We are a team of volunteers and starting a new initiative in a community in the same niche.
Your blog provided us beneficial information to work on.
You have done a marvellous job!
Hey there just wanted to give you a quick heads up.
The words in your
article seem to be running off the screen in Chrome. I’m not sure if this is a
format issue or something to do with web browser compatibility but I
figured I’d post to let you know. The design and style look great though!
Hope you get
the issue fixed soon. Thanks