The following example displays how you can synchronise two date pickers together and get a list of all of the dates that fall between the start date and end date...
$(function() { $('.date-pick').datePicker() $('#start-date').bind( 'dpClosed', function(e, selectedDates) { var d = selectedDates[0]; if (d) { d = new Date(d); $('#end-date').dpSetStartDate(d.addDays(1).asString()); } } ); $('#end-date').bind( 'dpClosed', function(e, selectedDates) { var d = selectedDates[0]; if (d) { d = new Date(d); $('#start-date').dpSetEndDate(d.addDays(-1).asString()); } } ); $('#go-button').bind( 'click', function(e) { var d = $('#start-date').dpGetSelected()[0]; var endD = $('#end-date').dpGetSelected()[0]; var datesInRange = []; if (d && endD) { d = new Date(d) endD = endD; while (d.getTime() != endD) { datesInRange.push(d.asString()); d.addDays(1); } alert(datesInRange); } else { alert('Please select start and end dates'); } return false; } ); });
/* located in demo.css and creates a little calendar icon * instead of a text link for "Choose date" */ a.dp-choose-date { float: left; width: 16px; height: 16px; padding: 0; margin: 5px 3px 0; display: block; text-indent: -2000px; overflow: hidden; background: url(calendar.png) no-repeat; } a.dp-choose-date.dp-disabled { background-position: 0 -20px; cursor: default; } /* makes the input field shorter once the date picker code * has run (to allow space for the calendar icon */ input.dp-applied { width: 140px; float: left; }