Using the jQuery DatePicker

I had a need to use a good date picker in a web page and I went with the jQuery library in order to have a set of tools that would be robust for GUI creation. It was fairly easy to implement.

The first hing I did was include the files that I would need from jQuery.  The following did that for me:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css" type="text/css" media="all" />


I placed these lines in the header of my html file.

I then created a text element for data entry.  this is where the date is going to go:
<INPUT TYPE=TEXT id="thedate">


I placed this line in the body of the html file.  Now, I added the code in order to display the date picker in the text element I had created.  I did this by creating a JavaScript function and putting it in the header of my html file.  The code looked like what is below:


<script>
$(function()
{
        $("#thedate").datepicker({dateFormat: 'yy-mm-dd'});
})
</script>

The one thing you will see is that I have 'yy-mm-dd'.  I have this in the constructor of the datepicker in order to format the date correctly for what I am expecting.  You can enter all kinds of parameters in here at the creation of the datepicker.  A link to the jQuery datepicker site is here.