The included files extend the jQuery UI datepicker to make it suitable for touch devices. This plugin is not included in jQuery Mobile by default, so you'll need to include the files yourself if you'd like to use them. Scroll down for usage instructions.
The datepicker auto-generates from a regular input element with a type="date" attribute.
<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" />
We'd recommend wrapping the label and input in a fieldcontain div for presentation purposes, and these elements should be placed within a form element for C-Grade browser accessibility.
Note: This plugin is not included in jQuery Mobile by default, so you'll need to include the following files in order to use it:
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script src="jQuery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>
You'll also want to configure the page plugin to convert "date" input elements to "text" inputs after they're enhanced with our datepicker, so that no native datepicker will conflict with the custom one we're adding. To do this, bind to the "mobileinit" event and set input types of "date" back to text using the page plugin's options:
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
Be sure to place this event binding in a script that loads after jQuery, but before jQuery Mobile. Check this page's source for an example.