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