jquery.datePicker example: inline datePicker combined

< date picker home

The following example shows you how you can bind inline date pickers together and propogate date changes from one to another. It also demonstrates updating hidden input fields with the selected values from your inline date pickers. You can see the values copied into the form by clicking here.

Date 1

The contents of this div will be replaced by the inline datePicker.

Date 2

(When you update date 1 this should be set to 3 days later)

The contents of this div will be replaced by the inline datePicker.

Date 3

(When you update date 1 this should be set to 3 days later as well - but it's not an inline calendar)

Page sourcecode

$(function()
{
	$('#date-view1')
		.datePicker({inline:true})
		.bind(
			'dateSelected',
			function(e, selectedDate, $td)
			{
				$('#date1').val(selectedDate.asString());
				$('#date-view2, #date-view3').dpSetSelected(selectedDate.addDays(3).asString());
			}
		);
	$('#date-view2')
		.datePicker({inline:true})
		.bind(
			'dateSelected',
			function(e, selectedDate, $td)
			{
				$('#date2').val(selectedDate.asString());
			}
		);
	$('#date-view3').datePicker();
	$('#form-check')
		.bind(
			'click',
			function()
			{
				alert('date1=' + $('#date1').val() + '\n' + 'date2=' + $('#date2').val());
			}
		);
});