### jQuery UI DatePicker

To use the jQuery UI DatePicker, amend the HTML file which displays the DatePicker with following:
In the HEAD section
<head>
...
<!-- The next 3 entries are used by the datepicker -->
<!-- Load jQuery UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- Load jQuery JS -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Load jQuery UI Main JS -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
...
</head>
In the BODY section
Define an inputfield with an ID.
Example:
Date:
In the SCRIPT section document.ready
Note that the DatePicker change handling uses the InputField for field Date as defined in the body.
In this case txttaskdate
<!-- Script for Server Connection and jQuery UI element settings -->
<script>
$( document ).ready(function() {
// DatePicker change handling
$( "#txttaskdate" ).datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true, //this option for allowing user to select from year range
dateFormat: 'yy-mm-dd'
});
...
Additional Information
http://api.jqueryui.com/datepicker/#option-dateFormat
By default, the datepicker calendar opens in a small overlay when the associated text field
gains focus. For an inline calendar, simply attach the datepicker to a div or span.

Changed: , Category: WebApps jQuery, File: T6C280M2098.htm, ID: 2098