<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
function GetDays(){
var dropdt = new Date(document.getElementById("drop_date").value);
var pickdt = new Date(document.getElementById("pick_date").value);
var result=parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
if(result<0)
{
alert("drop date is earlier than pickup date");
}
else
{
return result;
}
}
function cal(){
if(document.getElementById("drop_date")){
document.getElementById("numdays2").value=GetDays();
}
}
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>date picker</h1>
</div>
<form>
<div id="pickup_date"><p><label >Pickup Date:</label>
<input type="date" class="textbox col-md-4" id="pick_date" name="pickup_date" onchange="cal()"</p></div>
<div id="dropoff_date"><p><label class="form">Dropoff Date:</label>
<input type="date" class="textbox col-md-4" id="drop_date" name="dropoff_date" onchange="cal()"/></p></div>
<div id="numdays"><label class="form">Number of days:</label>
<input type="text" class="textbox" id="numdays2" name="numdays"/></div>
</form>
</div>
</body>
No comments:
Post a Comment