I’ve had a lot of users recently asking how to create a date/time range using the timepicker addon. Currently the jQuery UI documentation has an example using just datepicker, but it won’t quite work the same when using the timepicker. Why? The example from the jQuery UI docs explicitly only sets the date. But never fear, we can just as easily (if not easier) accomplish the same with Timepicker Addon. Lets start with a couple inputs:


<input type="text" id="startDate" name="startDate" value="" /> 
<input type="text" id="endDate" name="endDate" value="" /> 

Ok, we have two inputs, one for the start datetime, and one for the end datetime. Now to make this work correctly, when start date is updated, we need to set the “minDate” of the end date. And in reverse when end date is updated we need to set the “maxDate” on the start date. Here is how we do this:


$('#startDate').datetimepicker({
	onSelect: function (selectedDateTime){
		var start = $(this).datetimepicker('getDate');
		$('#endDate').datetimepicker('option', 'minDate', new Date(start.getTime()) );
	}
});

$('#endDate').datetimepicker({
	onSelect: function (selectedDateTime){
		var end = $(this).datetimepicker('getDate');
		$('#startDate').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
	}
});

Pretty straight forward. You could consolidate it all like on the datepicker example, but I decided to break it out for simplicity. Now lets add one more step, courtesy of Dana in the comments. We need set the opposite input date when either picker closes with a date, so lets do that:


$('#startDate').datetimepicker({
	onClose: function(dateText, inst) {
		var endDateTextBox = $('#endDate');
		if (endDateTextBox.val() != '') {
			var testStartDate = new Date(dateText);
			var testEndDate = new Date(endDateTextBox.val());
			if (testStartDate > testEndDate)
				endDateTextBox.val(dateText);
		}
		else {
			endDateTextBox.val(dateText);
		}
	},
	onSelect: function (selectedDateTime){
		var start = $(this).datetimepicker('getDate');
		$('#endDate').datetimepicker('option', 'minDate', new Date(start.getTime()));
	}
});
$('#endDate').datetimepicker({
	onClose: function(dateText, inst) {
		var startDateTextBox = $('#startDate');
		if (startDateTextBox.val() != '') {
			var testStartDate = new Date(startDateTextBox.val());
			var testEndDate = new Date(dateText);
			if (testStartDate > testEndDate)
				startDateTextBox.val(dateText);
		}
		else {
			startDateTextBox.val(dateText);
		}
	},
	onSelect: function (selectedDateTime){
		var end = $(this).datetimepicker('getDate');
		$('#startDate').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
	}
});

I will be adding this example to the documentation as well for reference. Hope you enjoy!