datepicker and validation
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
<form action="#">
<input id="StartDate" name="StartDate" type="date" />
<input id="EndDate" name="EndDate" type="date" />
<input type="submit" />
</form>
<br />
<div style="height: 800px">
gotat
</div>
JavaScript
$(document).ready(function () {
validate_start_date('StartDate');
validate_end_date('StartDate', 'EndDate');
});
function validate_start_date(start) {
$(`"#${start}"`).change(function () {
var startDate = document.getElementById(`"${start}"`).value;
var today = new Date();
today.setHours(0, 0, 0, 0);
if (Date.parse(startDate) <= today) {
alert('The start date cannot be before today.');
document.getElementById(`"${start}"`).value = '';
}
});
}
function validate_end_date(start, end) {
$(`"#${end}"`).change(function () {
var startDate = document.getElementById(`"${start}"`).value;
var endDate = document.getElementById(`"${end}"`).value;
if (Date.parse(endDate) <= Date.parse(startDate)) {
alert('The end date should be greater than the start date.');
document.getElementById(`"${end}"`).value = '';
}
});
}