jquery.datePicker example: datePicker with multiple select enabled

< date picker home

The following example shows how you can provide options to the date picker to allow you to select multiple dates. In this case a "dateSelected" event is triggered every time a date is selected or unselected. When the calendar is closed a "dpClosed" event is triggered.

There is an extension to the example which shows how you can limit the number of dates selectable.

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 different date picker pop up.

Page sourcecode

$(function()
{
	$('.date-pick')
		.datePicker(
			{
				createButton:false,
				displayClose:true,
				closeOnSelect:false,
				selectMultiple:true
			}
		)
		.bind(
			'click',
			function()
			{
				$(this).dpDisplay();
				this.blur();
				return false;
			}
		)
		.bind(
			'dateSelected',
			function(e, selectedDate, $td, state)
			{
				console.log('You ' + (state ? '' : 'un') // wrap
					+ 'selected ' + selectedDate);
				
			}
		)
		.bind(
			'dpClosed',
			function(e, selectedDates)
			{
				console.log('You closed the date picker and the ' // wrap
					+ 'currently selected dates are:');
				console.log(selectedDates);
			}
		);
});