$(document).ready(function() {
$('input[name$="Date"]').datepicker({
dateFormat: 'yy/mm/dd',
beforeShow: function() {
if ($(this).attr('maxDate')) {
var dateItem = $('#' + $(this).attr('maxDate'));
if (dateItem.val() !== "") {
$(this).datepicker('option', 'maxDate', dateItem.val());
}
}
if ($(this).attr('minDate')) {
var dateItem = $('#' + $(this).attr('minDate'));
if (dateItem.val() !== "") {
$(this).datepicker('option', 'minDate', dateItem.val());
}
}
}
});
});
<div>
<span>Query Date: </span>
<input id="startDate" name="startDate" maxDate="endDate" value=""/> ~
<input id="endDate" name="endDate" minDate="startDate" value="" />
</div>
<br/>
<div>
<span>Query Date2: </span>
<input id="query2StartDate" name="query2StartDate" maxDate="query2EndDate" value=""/> ~
<input id="query2EndDate" name="query2EndDate" minDate="query2StartDate" value="" />
</div>
External resources loaded into this fiddle: