jquery.datePicker example: inline datePicker

< date picker home

The following example shows you how you can use the date picker inline in your page (rather than as a popup). An inline datepicker always appears on the page and doesn't close when you select dates. You need to add a listener to the dateSelected event if you want to capture the user's choice of dates.

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

The contents of this div will be replaced by the inline datePicker.
The contents of this div will be replaced by the inline datePicker.
The contents of this div will be replaced by the inline datePicker.

Page sourcecode

$(function()
{
	$('.turn-me-into-datepicker')
		.datePicker({inline:true})
		.bind(
			'dateSelected',
			function(e, selectedDate, $td)
			{
				console.log('You selected ' + selectedDate);
			}
		);
});