Limiting Dates on Two jQuery Datepickers

Feb 03, 2010
0

I just ran into a scenario where I had two separate jQuery UI datepickers, and needed to have the first calendar limit the date choices of the second. Essentially a start date and end date. It doesn’t take a degree in relational physics to know that the end cannot come before the beginning; therefore, anything before the date the user chooses in the first calendar needs to be unavailable in the second calendar.

jQuery(document).ready(function($) {

	$('#start').datepicker({
		dateFormat: "@",
		onSelect: function(dateText, inst) {
			dateText = eval(dateText);
			var min = new Date();
			min.setTime(dateText);
			$('#end').datepicker('option', 'minDate', min);
		}

	});

	$('#end').datepicker({
		dateFormat: "@",
	});

});

It’s as easy as that.

However, if you’re localizing this script to the island from Lost, I cannot guarantee that start date will be there in the first place.

blog comments powered by Disqus
Keighl

© 2010 Keighl

1.508.265.3032
info@keighl.com