jQuery Calendar Widget

jQuery is a JavaScript library that dates from 2005. While it has a smaller feature set than YUI, it is considerably easier to implement since everything is packed into one basic jQuery file. For the datepicker widget, there is also a datepicker JavaScript file and CSS style file. That's it. You can get your own copies of these three files by downloading them from this page.

<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="flora.datepicker.css" type="text/css" 
     media="screen" title="Flora (Default)">
<script src="ui.datepicker.js" type="text/javascript"></script>
        

My example below is an inline version of the jQuery datepicker widget, which is hosted by some element such as a <span> tag.

  <span id="inlineDemo" style="float: left; padding: 10px"></span>
       

The calendar script itself is placed at the BOTTOM of your HTML page. I have used the "onSelect" method to fire an event when a date is selected -- It reaches out to the heading "What day is it?" and replaces this heading with the date selected. As well, I have constrained all dates to 2009 by defining a minimum date of January 1, 2009 and a maximum date of December 31, 2009.

<script type="text/javascript">
$('#inlineDemo').datepicker({ 
    minDate: new Date(2009, 1 - 1, 1),
    maxDate: new Date(2009, 12 - 1, 31),
	onSelect: function(dateText)
		{
			var i = document.getElementById("heading");
			i.innerHTML = dateText;
		} 
});
</script>

       

---

What day is it?