# 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);
    			}
    		);
    });