- This topic has 39 replies, 8 voices, and was last updated 12 years, 3 months ago by
.
-
Posts
-
Kifo
Good to hear it works on someone else’s iphone.
The file I sent before maybe was not zipped properly.
I have attached a new Zip file which contains the complete project.
You should be able to get it working in Mobione Test Centre.
Let me know if you still have problems.
Paul
Well, i thought of implementing a calender page like the one in http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/ instead of a datepicker but i failed … try it if you want and let me know
Kifo,
I know why you cant get it to work in Mobione Test Centre.
The dp1.html file is missing this code (because MObione overwrites the html file when you run in test centre)
<script>
$(function() {
$( “#m1-dp1-textField1” ).datepicker();
});
</script>Add this code just before the closing <head/> tag
When you run in the test Centre, you will(should) get a message “The following files have been manually modified. Dp1.html……”
Dont select it, Click OK instead.
The above script has been manually added by me, you do not want MObione to overwrite it and create a new html file, because it wont inlude this script.
It will work, trust me.
I will have a look at the new calendar widget you mentioned, it looks good, much better than the crappy widget I have been using.
Hi Paul,
It woooooorked, yapiiiiiiiii
thank you so much for your help …. its not crappy, atleast its the only datepicker that worked 🙂
let me know if you can implement the other one because it is based on javascript for mobile …
and i will play with this one more and will let you know if i come with any thing newHello Kifo
I was able to get that datepicker you found to work, it looks good.
Here is the Mobione tiny URL to install it on your iphone:
I have attached the project as a zip file
Remember that you dont want Mobione to overwrite the DP2.html file when you run it in the test centre, but if that happens replace it with this:
<!DOCTYPE HTML>
<html>
<head>
<title>DP2</title>
<meta name=”generator” content=”MobiOne Studio – Design Center, http://genuitec.com/mobile“/>
<meta name=”viewport” content=
“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″/>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/>
<meta name=”apple-mobile-web-app-capable” content=”yes”/>
<meta name=”format-detection” content=”telephone=no”/>
<link rel=”stylesheet” href=”DP2.css”/>
<link rel=”stylesheet” href=”res/spinningwheel.css”/>
<script type=”text/javascript” src=”res/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”res/preloadCssImages.js”></script>
<script type=”text/javascript” src=”res/iscroll.js”></script>
<script type=”text/javascript” src=”DP2.js”></script>
<script type=”text/javascript” src=”res/phoneui.js”></script>
<script type=”text/javascript” src=”res/spinningwheel.js”></script>
<script type=”text/javascript” src=”DP2_custom.js”></script>
<link rel=”apple-touch-startup-image” sizes=”768×1004″ href=”images/splash_768x1004.png” media=
“screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)”
/>
<link rel=”apple-touch-startup-image” sizes=”320×460″ href=”images/splash_320x460.png” media=
“screen and (max-device-width: 320px)”/>
<link rel=”apple-touch-icon” href=”images/calendar1.jpg”/>
<link rel=”stylesheet” href=”http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css” />
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css”/>
<script src=”jquery-1.5.min.js”></script>
<script src=”http://code.jquery.com/jquery-1.5.min.js”></script>
<script>
//reset type=date inputs to text
$( document ).bind( “mobileinit”, function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script src=”http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js”></script>
<script src=”http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jQuery.ui.datepicker.js”></script>
<script src=”http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js”></script></head>
<body>
<div data-role=”page”><div data-role=”content”>
<form action=”#” method=”get”>
<div data-role=”fieldcontain”>
<label for=”date”>Date Input:</label>
<input type=”date” name=”date” id=”date” value=”” style=”font-size: xx-large; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; font-family: serif; font: normal normal bold xx-large serif; width: 191px; height: 53px; text-align: center;” />
</div>
</form></div>
</div>
</body>
</html>Let me know if you cant get it working.
I am now trying to figure out how to set the date format to Australian date format (dd/mm/yy)
Paul
Hello Octavio,
A few months ago I asked if there was a way to suppress the keyboard from popping up for a textfield.
You said “I don’t know of a way to surpress the keyboard for an input field but I’m searching for a solution.”
I found a very easy way “Readonly = “true” does that nicely
<input id=”m1-dp1-textField1″ class=”m1-textfield m1-textfield-border” readonly=”true” value=”” type=”text”
That way I can get a datepicker to pop up on a textfield without the keyboard also popping up.
Regards Paul
You can also set it dynamically using Javascript. For example, I have a landing page of a dynmaic list where the read-only property depends on what the previous screen is. I’ll try to post some code later.
-1TC
In Javascript:
$(‘#m1-Pagename-textfield’).attr(‘readonly’,’readonly’);
$(‘#m1-Pagename-textfield’).removeAttr(‘readonly’)-1TC
Thanks 1TC, that is very useful.
Kifo the datepicker you found looks great, but there is a serious problem with it.
What if you needed to enter a date say 5 years in the past e.g. 5 July 2007
With the datepicker you found a user would have to click on the previous month arrow (5 * 12 )
60 times to get to that date.That makes it useless in my opinion.
I have found a better datepicker that looks good and solves this problem very nicely, it has dropdown arrows to select month and year.
Here is a link to it
http://keith-wood.name/datepick.html
It works great.
Let me know if you find a better one than this.
here is another control specially for smart phones, and is really smart one …. but again i failed to implement this … i need help with this one please
