In real time applications this scenario is very important
for counting days between two selected days.Here I have taken Start Date and End Date for counting days
between start date and end date.For that I have taken two input fields as type
date with ids as “startDate” ,”endDate”.
General Scenario: Suppose in your application, you are going
to create new program for that you must select start and end date and also
print how many days between two selected days by automatically.
Why we give id to the input field?
Because find and read appropriate input values.Here I have
taken startDate and endDate as ids to the Start Date and End Date fields. Because in script I can
read entered values in input field through this ids only.So ids are must be
unique.
<!DOCTYPE html>
<html>
<body>
<h1>Count between two days through
javascript</h1>
<h4>Select Start Date</h4>
<input type="date" id="startDate"
onChange="onDateChange()"/>
<h4>Select End date </h4>
<input type="date" id="endDate"
onChange="onDateChange()"/>
<p>Difference is :<p id="demo">
</p></p>
<script>
function onDateChange()
{
var sDate=new
Date(document.getElementById("startDate").value);
var eDate=new Date(document.getElementById("endDate").value);
var timeDiff=Math.abs(eDate.getTime()-sDate.getTime());
var diffDays=Math.ceil(timeDiff/(1000*3600*24));
document.getElementById("demo").innerHTML =
diffDays;
}
</script>
</body>
</html>
Process:
1.Whenever
we select dates ,action goes to script with onDateChange() function
2.Read startdate and endDate values
3.Find time difference between two selected days
4.Find days difference between two selected
days
5.For print out put on page ,I have taken <p id="demo"> ,in script assign values I used
document.getElementById("demo").innerHTML = diffDays;
Note : You can do same thing in jquery also count days between two
selected dates.
No comments:
Post a Comment