App Inventor and embedded HTML/JavaScript
jQuery UI
Now available for 
App Inventor 2!
jQuery UI is a nice library built on top of the
jQuery JavaScript Library which provides a lot of effects and user interface widgets.
One of them is the Date picker widget, we will use in this example.
The user can select a date from the date picker widget and the selected date will be returned to App Inventor.
Issue 137 is no issue anymore!
For the example I downloaded the jQuery and
jQuery UI library. Then I uploaded the following files as assets into App Inventor.
The css file has been adjusted to find the images in the current directory instead of the images subdirectory.
The HTML file date.html also is uploaded as asset to App Inventor.
There is one special thing to consider for HTML documents uploaded as assets into App Inventor:
During development, you have to use the development path to the embedded HTML document.
file:///mnt/sdcard/AppInventor/assets/date.html
Before packaging the app, use the production path.
file:///android_asset/date.html
You also might be interested in Scott's Calendar/Date-picker template.
App Inventor,
<!doctype html> <head> <meta name="author" content="puravidaapps.com"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery-ui-1.8.22.custom.css"> <script src="jquery-1.8.0.min.js"></script> <script src="jquery-ui-1.8.22.custom.min.js"></script>
<title>Date</title> </head> <body> <div id="datepicker"></div>
<script>
$(document).ready(function(){
$("#datepicker").datepicker({
// print the selected date to the page title
onSelect: function(dateText, inst) { window.document.title = dateText }
});
});
</script>
</body> </html>
Q1: Can I call your application as an activity from my application or do I have to write the code within my screens/code?
A: The example is designed to be included in your App Inventor app.
Q2: Is the calendar language dynamic based on the phone's settings? If not how can I change the language?
A: The example is prepared for english. There is no automatic language adjustment. The following links can help
you to configure the calendar for another language:
http://jqueryui.com/datepicker/#localization and
http://stackoverflow.com.
If you still have problems, I also can send you the adjusted html file for the datepicker example of one of the available languages by mail after having received a donation from you.
Q3: How can I set the default date to say plus 4 days?
A: You can find the answer to this question in the API documentation.
Q4: Is there also a time picker available?
A: You can find Scott's time picker here.
Q5: I use the datepicker example in my project. Why do I have to push my button twice to display the calendar the first time?
On later usages it pop-ups with the first push.
A: The problem is the home url. The clock component may be faster than opening the webviewer the first time, therefore the clock component
will set the webviewer to visible = false again before it will be displayed. To avoid this problem, add the url to the date.html file
additionally in the webviewer component of the designer window (home url). Before packaging the app, don't forget to change the
development path to the production path there, too!
Q6: The problem is that when I get the selected date I get it in a specific format MM/DD/YYYY. I was wondering if I could re-format
in the same way that the clock displays the date - 18 Feb 2012...? If it's possible,how would I do that,any ideas?
A: Yes, you can adjust it easily to a specific format, see the API documentation. If you still have problems, I also can send you the adjusted html file by mail after having received
a donation from you.
Developing and maintaining snippets, tutorials and extensions for App Inventor takes a lot of time.
I hope it saved some of your time. If yes, then you might consider to donate a small amount!
or donate some mBTC to 
Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Thank you! Taifun
Download aia file for App Inventor
Back to top of page ...
This work by Pura Vida Apps
is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.
Site Content © 2010 - 2022 Pura Vida Apps using the
Foundation Framework.