jquery.datePicker example: datePicker with listener

< date picker home

The following example displays basic use of the datePicker command. A datePicker is created associated with our link elements. When the links are clicked we call the $().dpDisplay function to make a calendar pop up. When a date is selected on the calendar our custom "dateSelected" function is fired and we have a function bound to listen to it and alert the selected date.

NOTE: You will need firebug to see the results of the demo - firebug lite is included in this page so whatever browser you are in just press F12 to open up the firebug console.

Click here to see a date picker pop up next to that link. You can also click here to see a different date picker pop up.

Page sourcecode

$(function()
{
	$('.date-pick')
		.datePicker({createButton:false})
		.bind(
			'click',
			function()
			{
				$(this).dpDisplay();
				this.blur();
				return false;
			}
		)
		.bind(
			'dateSelected',
			function(e, selectedDate, $td)
			{
				console.log('You selected ' + selectedDate);
			}
		);
});