jquery.datePicker example: datePicker with multiple select enabled and a limit on the number of selectable days

< date picker home

The following example shows how you can provide options to the date picker to allow you to select multiple dates. It extends the basic multiple select example and shows how you can also pass a numSelectable to limit the number of dates that can be selected at a time... A class of unselectable is added to all dates which aren't selected once you have selected the numSelectable. In my example css this is styled the same as disabled dates but you can style it as you like...

Thanks to ioframe for the patch which inspired this functionality :)

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,
				numSelectable:3
			}
		)
		.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);
			}
		);
});