A common task in Worklight hybrid applications is to create a datepicker. While Android and iOS support HTML5 implementtations of the datepicker, Windows Phone 8 requires some extra steps to get similar functionality. This tutorial employs the use of Jquerymobile and Jquery.
The first is that Windows Phone 8 is only supported on JQueryMobile
versions 1.4+ (http://jquerymobile.com/gbs/1.4/). So the first thing to do is to import the JQueryMobile 1.4.2 library into your project.
Next, you'll notice in the documentation for the Datepicker widget in
1.4.2 that it is in reality a JQuery widget, not a JQueryMobile widget,
and you must provide a wrapper for it to work properly in a
"PLEASE NOTE: This is not a jQuery Mobile widget and is not supported
by jQuery Mobile.
This demo uses the jQuery UI Datepicker widget combined with a 3rd
party wrapper to make this work with jQuery Mobile. This widget has all
the same options and methods as the jQuery UI widget."
This wrapper is relatively easy to implement. These are the steps required:
1 - Navigate to:
2 - Note that the declaration for the datepicker changes slightly from the jQueryMobile datepicker, to one of the following:
<input type="text" class="date-input" data-inline="false"
<input type="text" class="date-input-inline" data-inline="true"
This depends on whether you want the picker to be present at all times
or not. I chose to use the first (data-inline="false"), as it causes the picker to pop up only once you've selected the box.
3 - The project now requires that you reference the JQuery libraries
and a few specific modules. These are available at the following links.
Simply download these files and place them in your JQueryMobile
directory where you have your 1.4.2 files:
File Structure and Imports
4 - Finally, I noticed that every time I tapped the box in question,
the native Windows Phone keyboard was popping up over the calendar. To
prevent this from happening, give your date-input element an "id" (I
used "test"), and add the following lines to the end of your
5 - Use CSS to style and size your datepicker as needed.
6 - Build and deploy your application
Following these steps should allow you to create the wrapper for the datepicker and call upon the JQuery datepicker.