In real time applications this scenario is very important
for counting days between two selected dates.
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 dates 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.Becacuse 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 JQuery</h1>
<h4>Select Start Date</h4>
<input type="date" class="date" id="startDate"/>
<h4>Select End date </h4>
<input type="date" class="date" id="endDate"/>
<p>Difference is :<p id="demo">
</p></p>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
$('.date').change(function() {
var sDate=new Date($("#startDate").val());
var eDate=new Date($("#endDate").val());
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 change function
2. Read startdate and endDate values
3. Find time difference between two selected dates
4. Find days difference between two selected dates
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 javascript also count days between two selected dates
You can watch video
tutorial on this example.
No comments:
Post a Comment