Calculate days between two dates in JavaScript

Occasionally, it is necessary to determine the number of days separating two specific dates. This task can be accomplished utilizing the JavaScript programming language. JavaScript includes a mathematical function, Math.floor, which can be employed to compute the days that lie between two dates. To perform any date-related calculations in JavaScript, it is essential to utilize the date object, which is created using new Date.

For an in-depth understanding of JavaScript, please follow our comprehensive step-by-step JavaScript tutorial.

We will determine the total number of days through two distinct methods:

✅ Determine the number of days by inputting two specific dates
✅ Calculate the number of days starting from the current date

We will explore both techniques thoroughly, including illustrative examples. Additionally, we will compute the number of days left until Christmas Day based on today's date, which will be retrieved from the system.

✅ Determine the count of days left until Christmas from the present date.

Approach 1: Calculate the days by entering two dates

This approach will help to calculate the days between two dates by providing two different dates in code. Follow the below step:

✅ Define two date variables in JavaScript
✅ Initialize them by creating the date objects using new Date
✅ After defining the dates, calculate the time difference between them by subtracting one date from another date using date2.getTime - date1.getTime;
✅ Now next step is to calculate the days between the dates. So, we will divide the time difference of both dates by the milliseconds in a day, i.e., 10006060*24
✅ At last, print the result calculated using the document.write method.

At this point, we will translate these outlined steps into practical execution. Refer to the code provided below:

Copy Code

Example


<html>

   <head>

      <title>Calculate days by entering two dates</title>

   </head>

   <body>

      <script>

         var date1, date2;

         //define two date object variables with dates inside it

         date1 = new Date("07/15/2015");

         date2 = new Date("11/28/2016");



         //calculate time difference

         var time_difference = date2.getTime() - date1.getTime();



         //calculate days difference by dividing total milliseconds in a day

         var days_difference = time_difference / (1000 * 60 * 60 * 24);

         

         document.write("Number of days between dates <br>" + 

                         date1 + " and <br>" + date2 + " are: <br>" 

                         + days_difference + " days");

      </script>  

</body>

</html>

Output


Number of days between dates 

Mon Jul 20 2015 00:00:00 GMT+0530 (India Standard Time) and 

Tue Sep 20 2016 00:00:00 GMT+0530 (India Standard Time) are: 

502 days

Screenshot

Calculate days using dynamic HTML form

This example demonstrates a dynamic JavaScript implementation that allows users to input their own data directly through the web interface, rather than having the programmer hard-code specific dates. Users can interactively select their dates from a calendar and enter two separate dates into an input field. By pressing a button, they can compute the total number of days that fall between the two selected dates. Below is the code:

Copy Code

Example


<html> 

<head> 

    <title> Calculate days between dates </title> 

      <script>

       function daysDifference() {

         //define two variables and fetch the input from HTML form

         var dateI1 = document.getElementById("dateInput1").value;

         var dateI2 = document.getElementById("dateInput2").value;



        //define two date object variables to store the date values

         var date1 = new Date(dateI1);

         var date2 = new Date(dateI2);

 

        //calculate time difference

         var time_difference = date2.getTime() - date1.getTime();



         //calculate days difference by dividing total milliseconds in a day

         var result = time_difference / (1000 * 60 * 60 * 24);



         return document.getElementById("result").innerHTML =  

              result + " days between both dates. ";

                    }

      </script>  

</head>  

<body> 

  

    <h2 style="color: 32A80F" align="Center">  

            Result: Calculate days between dates 

        <br> <br> </h2> 

  

        <p align="Center"> <b> Enter date1 � </b> 

        <input type="date" id="dateInput1"> 

        <br> <br> 

        

        <p align="Center"> <b> Enter date2 � </b> 

        <input type="date" id="dateInput2"> 

        <br> <br>     

  

        <button onclick="daysDifference()"> 

          Calculate number of days 

        </button> 

    </p> 

  

    <h3 style="color:32A80F" id="result" align="center"></h3> 

  

</body>  

</html>

Output

Examine the screenshot provided below, which features two calendar input fields, a single submit button designed to execute all calculations, and an additional field intended for displaying the computed result.

Approach 2: Calculate the days from current date

In this approach, we will use the math function Math.floor to calculate the days. Follow the below step:

✅ Define two date variables, i.e., date1 and date2
✅ Initialize the date1 variables by creating the date objects using new Date , which will take system date by default.
✅ Initialize the date2 variables by creating the date objects using new Date and provide a date in it.
✅ Now use the Math.abs method to calculate the total seconds between two dates. So, divide the difference of dates by the milliseconds in one second Math.abs(date2-date1) / 1000;
✅ Now next step is to calculate the number of days using the Math.floor method. So, divide the calculated result from previous steps (total seconds between two dates) by 606024
✅ At last, print the result calculated using the document.write method.

At this point, we will translate these instructions into practical execution. Refer to the code provided below:

Copy Code

Example


<html>

   <head>

      <title>Calculate days between the dates using default system dates</title>

   </head>

   <body>

      <script>

         var date1, date2;

         //define two date object variables with dates inside it

         date1 = new Date();

         date2 = new Date ("Dec 15, 2021, 21:45:10");



         //calculate total number of seconds between two dates

         var total_seconds = Math.abs(date2 - date1) / 1000;



         //calculate days difference by dividing total seconds in a day

         var days_difference = Math.floor (total_seconds / (60 * 60 * 24));

         

         document.write("Number of days between dates from current date <br>" + 

                         date1 + " and <br>" + date2 + " are: <br>" 

                         + days_difference + " days");

      </script>  

</body>

</html>

Output


Number of days between dates 

Sun Sep 27 2020 19:42:13 GMT+0530 (India Standard Time) and 

Tue Dec 15 2021 21:45:10 GMT+0530 (India Standard Time) are: 

444 days

Screenshot

Example 3: Calculate the days remaining in Christmas day from the current date

We have one more example in which we will calculate the days till Christmas Day means for a specific date. Follow the below steps:

✅ Define the current date (system date) by creating a date object using the new Date .
✅ Define one more date using new Date class method and fetch the Christmas date by date.getFullYear method in it. The date.getFullYear method will return the year (0-11 months in JavaScript).
✅ In case Christmas has been already passed away this year, it will return the number of days remaining in Christmas of next year from the current date.
✅ Now, its time to use Math.round function to calculate the result in milliseconds and then convert this result into days. So, divide the Math.round(Christmas - present_date.getTime) by the total milliseconds in a day, i.e., 10006060*24.
✅ Remove the decimal value from the result and display it to the web using document.write method.

Next, let's transform these instructions into a practical implementation that will determine the number of days left until Christmas. The execution of this task is as straightforward as the outlined steps. Refer to the following code:

Copy Code

Example


<html>

   <head>

      <title>Calculate days remaining in Christmas</title>

   </head>

   <body>

      <script>

         //declare two variables in JavaScript

         var current_date, christmas_day;



         //total milliseconds in one day

         var one_day_ms = 1000 * 60 * 60 * 24;



         //set the current date in the variable 

         current_date = new Date();



         //set the Christmas date in another variable where 0-11 is month in JavaScript

         christmas_day= new Date(current_date.getFullYear(), 11, 25);



         //calculate next year Christmas if this year?s date is already passed away 

         if (current_date.getMonth() == 11 && current_date.getdate() > 25)

         {

              christmas_day.setFullYear(christmas_day.getFullYear() + 1); 

         }



         //calculate result in milliseconds and convert it into days

         var res = Math.round(christmas_day.getTime() - current_date.getTime()) / (one_day_ms);         



         //remove the decimal point from the calculated result

         var FinalResult = res.toFixed (0);



         //display the final result on web

         document.write("Number of days remaining in Christmas day: <br>" + 

                         current_date + " and <br>" + christmas_day + " are: <br>"  +  FinalResult + " days");

      </script>  

</body>

</html>

Output


Number of days remaining in Christmas day: 

Mon Sep 28 2020 14:32:50 GMT+0530 (India Standard Time) and 

Fri Dec 25 2021 00:00:00 GMT+0530 (India Standard Time) are: 

87 days

Screenshot

Here are all the essential examples, encompassing both static and dynamic methods, in JavaScript for determining the difference in days. For a comprehensive step-by-step understanding of JavaScript, please refer to our JavaScript tutorial.

Approach 1: Calculate the days by entering two dates

Calculate days using dynamic HTML form

Approach 2: Calculate the days from current date

Example 3: Calculate the days remaining in Christmas day from the current date

Input Required