<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="custom.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
$( function() {
$( "#datepicker1" ).datepicker();
} );
</script>
</head>
<body>
<div class="container" style="margin-top:25px;">
<div class="row">
<div class="col-sm-12">
<h2>Compare beetween two date in javascirpt Simply</h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>First Date: <input type="text" id="datepicker" name="firstDate" class="form-control"></p>
<br />
<p>Second Date: <input type="text" id="datepicker1" class="form-control" name="secondDate"></p>
<br />
<p id="result"></p>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(e) {
$(document).on('change','#datepicker1',function(){
$("#result").html();
var firstDate = $('#datepicker').val();
var secondDate = $("#datepicker1").val();
if(firstDate ==""){
$("#result").html("<p class='alert alert-danger'>Select first Date in first date Picker </p>");
}
else{
if(new Date(firstDate) > new Date(secondDate)){
$("#result").html("<p class='alert alert-warning'>First date is Greater than second Date . </p>");
}
else{
$("#result").html("<p class='alert alert-info'>Second Date is Greater than First Date . </p>");
}
}
});
});
</script>
