App Inventor and embedded HTML/JavaScript


A Date Picker with App Inventor and an embedded HTML document using jQuery UIjQuery 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 Blocks

Do you need help with your App Inventor project?

I can help you: for one hour I charge 25 USD.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.

Screenshots

HTML/jQuery Script

<!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>

Questions and Answers

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.

Download


If you find this example helpful and you are using it in one of your projects,
be nice and donate a small amount!

Donation amount:

or donate some mBTC to Bitcoin Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Bitcoin

Thank you! Taifun
 

Download aia file for App Inventor
Back to top of page ...

Creative Commons License
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.


Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact