jquery.datePicker example: linked datePickers with start and end dates and code to get a list of dates

< date picker home

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...

Test date picker form

1. Start date:
2. End date:
4. Test select: Test SELECT Doesn't shine through Even in IE Yay!

Page sourcecode

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

Page CSS

/* 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;
}