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.
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.
$(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);
}
);
});