jquery.datePicker example: karmasAgent demo 2

< date picker home

The following example is part II (see part I) of a series and was written to answer this support request.

Page sourcecode

$(function()
{
	$('#monthsList li').each(
		function()
		{
			$this = $(this);
			
			var d = Date.fromString('01/' + $this.html());
			var startDate = d.asString();
			d.setMonth(d.getMonth() + 1);
			d.addDays(-1);
			var endDate = d.asString();
			
			$this
				.datePicker(
					{
						createButton:false,
						startDate: startDate,
						endDate: endDate
					}
				)
				.bind(
					'click',
					function()
					{
						$(this).dpDisplay();
						this.blur();
						return false;
					}
				)
				.bind(
					'dateSelected',
					function(e, selectedDate, $td)
					{
						Date.format = 'yyyymmdd';
						// alert the URL
						alert('http://www.myURL.com/section/' + selectedDate.asString());
						// reassign the date format back to how you want it.
						Date.format = 'dd/mm/yyyy';
					}
				);
		}
	)
});

Page CSS

/* Make it so that dates from other months don't show up */	
td.other-month {
	visibility: hidden;
}