July 3, 2020

How to Get Number of Days Between Two Dates in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get the number of days between two dates in javascript. There are 7 days in a week and one day is equivalent to 1.2442e+11 milliseconds. Depending upon the name of the month, we can have 28, 29, 30, or 31 days in a single month. The method explained here in this tutorial can be used to create an online age calculator tool.

In the following example, we have two dates 05/01/2019 and 09/09/2019. We will simply grab the number of days between these two dates using the Date constructor and display the result on the screen. Please have a look over the code example and steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and h1). The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Get” and for the h1 element is “Result”.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button>Get</button>    
        <h1>Result</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected two elements button and h1 using the document.querySelector() method and stored them in btnGet and result variables respectively.
We got instances of both dates using the Date constructor and stored them in date1 and date2 variables.
We have attached the click event listener to the button element.

Each Date instance has the getTime() method which returns the number of milliseconds.
Inside the click event handler function, we are using this method with both instances of date and subtracting the number of milliseconds returned by date1 from the number of milliseconds returned by date2 and storing the result in the diff variable.
In one second, we have 1000 milliseconds. In one hour, we have 3600 seconds and in one day, we have 24 hours. Keeping this in mind, we are using this code 1000 * 3600 * 24 to get the number of milliseconds in a day and we are storing it in the msInDay variable.

We need the difference in days, so we are simply dividing the number of milliseconds between two dates by the number of milliseconds in one day (diff/msInDay) and displaying the result in the h1 element.

let date1 = new Date('05/01/2019');
let date2 = new Date('09/09/2019');

let btnGet = document.querySelector('button');
let result = document.querySelector('h1');

btnGet.addEventListener('click',  () => {
    let diff = date2.getTime() - date1.getTime();

    let msInDay = 1000 * 3600 * 24;

    result.innerText = diff/msInDay;
});

You May Also Like: