In this tutorial, we will learn to calculate the javascript difference between two dates in days. It is often required for web development purposes such as doing calculations on a web page on the fly.
For example:- We have created two date input fields in an HTML file as shown on the image above and the no of days will be shown in the days’ input field.
Also read, Dropdown search box jQuery example with select2.min.js
Illustration of the example to find Javascript difference between two dates
- Declare the date inputs with the id attribute to get the date value from the input field.
- Use the javascript onchange event as a function to get the result while changing the mouse from one field to another field input.
- First we will store the date values in different variables using the document.getElementById() function.
- Also, we will wrap the date values using the new Date() function to create a date object.
- Next, we will get the time difference between two dates using the getTime() function in javascript.
- Finally, we will divide the time difference by the no of milliseconds in a day i.e. (1000360024) in order to get the javascript difference between two dates in days.
<html>
<head>
<title>ajax example</title>
<link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.css" crossorigin="anonymous">
<style>
.container{
width:70%;
height:30%;
padding:20px;
}
</style>
</head>
<body>
<div class="container">
<h3 align="center">Calculate Javascript Difference between Two Dates in Days</h3>
<br/><br/><br/>
<div class="form-group row">
<label class="control-label col-sm-2">Start Date:</label>
<div class="col-sm-2">
<input type="date" id="start_date">
</div>
<label class="control-label col-sm-2">End Date:</label>
<div class="col-sm-2">
<input type="date" id="end_date" onchange="getDays()">
</div>
<label class="control-label col-sm-2">Days:</label>
<div class="col-sm-2">
<input type="text" id="days">
</div>
</div>
<br/><br>
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
//get the days between two dates
function getDays(){
var start_date = new Date(document.getElementById('start_date').value);
var end_date = new Date(document.getElementById('end_date').value);
//Here we will use getTime() function to get the time difference
var time_difference = end_date.getTime() - start_date.getTime();
//Here we will divide the above time difference by the no of miliseconds in a day
var days_difference = time_difference / (1000*3600*24);
//alert(days);
document.getElementById('days').value = days_difference;
}
</script>
</body>
</html>
Download the bootstrap CSS and js files from google and include the path of the files in the href attribute of link tag and src attribute of the script tag respectively.
CONCLUSION:- I hope this article will help you to understand easily. If you have any doubt then please leave your comment below. If you want an alternate solution for the above example then visit here
Wow that was strange. I just wrote an incredibly long comment but after I
clicked submit my comment didn’t appear. Grrrr… well I’m not writing all
that over again. Regardless, just wanted to say great blog!
Oh my goodness! Amazing article dude! Thanks,
However I am having issues with your RSS. I don’t know the reason why I
cannot join it. Is there anybody else getting the same RSS problems?
Anybody who knows the answer will you kindly respond?
Thanks!!