Datepicker

The UI Datepicker plugin provides a dynamic and handy popup calendar for selecting dates. It is very flexible and can be configured and themed in different ways.

The definitive sample of what can be done with the Datepicker can be found at the official documentation or at the demo site.

To get started, download the CSS and JavaScript files. Both of these are available via the demo page. (Scroll down a little to the "Use jQuery UI Datepicker" section...).

With these two files, include them AFTER the jQuery library is included.

<script type="text/javascript" src="jquery-1.2.1.packed.js"></script>
<style type="text/css">@import url(ui.datepicker.css);</style>
<script type="text/javascript" src="ui.datepicker.js"></script>


Next you set up an input box to be a date field:

<input type="text" id="start_date">


And finally you apply the datepicker to the field.

<script type="text/javascript">
$(document).ready( function () {
//apply the date picker to the input field
$("#start_date").datepicker();
//
//another sample, with some options
$("#start_date").datepicker({
showOn: 'both',
buttonImageOnly: true,
buttonImage: 'calendar.gif',
buttonText: 'Calendar'
});
});
</script>


The full list of options can be found on the documentation page or via the demo page.