jQuery UI DatePicker start-end validation
HTML
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/ui-darkness/jquery-ui.css">
<input type="text" id="start_date" />
<input type="text" id="end_date" />
JavaScript
function dateChanged() {
var $start = $('#start_date'),
$end = $('#end_date');
var startDate = $start.datepicker("getDate"),
endDate = $end.datepicker("getDate");
if (startDate && endDate && startDate > endDate) {
alert("Start date is greater than the end date.");
$start.datepicker("setDate", endDate);
$end.datepicker("setDate", startDate);
}
}
$start.datepicker().on('change', dateChanged);
$end.datepicker().on('change', dateChanged);