How to get different between two dates (in a form) in days

Question

I have this javascript code to get the difference between two dates inside a form tag in html

<script type="text/javascript">
        function dueDate(){
            var date1=document.getElementById("date1").value;
            var date2=document.getElementById("date2").value;
            var diffDays = parseInt((date2 - date1) / (1000 * 60 * 60 * 24)); 
            alert(diffDays)             
        }
 </script>

This is myhtml code (and two date selectors are inside a form)

<div class="login-form">
        <form name="login" method="POST">
             <table cellspacing="10">
                <tr>
                    <td id="text">Book Return Due Date:</td>
                    <td><input id="date1" type="date" name="username"></td>
                </tr>
                <tr>
                    <td id="text">Current Date:</td>
                    <td><input id="date2" type="date" name="password"></td>
                </tr>
                <tr>
                    <td id="text"><input id="button1" type="submit" value="Check for Due" onclick="dueDate()"></td>
                    <td><input id="button2" type="reset" value="Reset"></td>
                </tr>

             </table>
        </form>
    </div>

But I'm getting an alert as "NaN". Please help me

Note that you can try the recently added [*valueAsDate* property](http://w3c.github.io/html/sec-forms.html#dom-htmlinputelement-valueasdate) for date inputs, though support may be limited. — RobG, Sep 03 '17 at 22:34

Hammadi Agharass · Accepted Answer · 2017-09-02T17:52:40.860

3

Javascript has Date() object for manipulating dates, You can try this:

var date1 = new Date(document.getElementById("date1").value);
var date2= new Date(document.getElementById("date2").value);
var diffDays = Math.round((date2.getTime() - date1.getTime()) / 1000 / 60 / 60 / 24);

edited Sep 02 '17 at 17:52

answered Sep 02 '17 at 17:42

Hammadi Agharass

291
1
7

score 1 · Answer 2 · answered Sep 02 '17 at 17:45

You'll need date objects, not just the string values returned from the inputs, to be able to subtract one date from the other

document.getElementById('button1').addEventListener('click', dueDate);

function dueDate() {
  var date1 = document.getElementById("date1").value;
  var date2 = document.getElementById("date2").value;
  var obj1  = new Date(date1);
  var obj2  = new Date(date2);
  
  
  var diffDays = (obj2 - obj1) / (1000 * 60 * 60 * 24);
  alert(diffDays)
}

<div class="login-form">
  <form name="login" method="POST">
    <table cellspacing="10">
      <tr>
        <td id="text">Book Return Due Date:</td>
        <td>
          <input id="date1" type="date" name="username">
        </td>
      </tr>
      <tr>
        <td id="text">Current Date:</td>
        <td>
          <input id="date2" type="date" name="password">
        </td>
      </tr>
      <tr>
        <td id="text">
          <input id="button1" type="submit" value="Check for Due">
        </td>
        <td>
          <input id="button2" type="reset" value="Reset">
        </td>
      </tr>

    </table>
  </form>
</div>

score 0 · Answer 3 · answered Sep 02 '17 at 17:46

0

When you get value from your html, its type is string, so you should parse it to date. When you try to substract two strings it returns NAN. Look here for Date.parse method.

answered Sep 02 '17 at 17:46

Симеон Симеонов

161
2
13

An excellent point. Thanks. Really helpful :) – Buddy Sep 03 '17 at 12:15

How to get different between two dates (in a form) in days

3 Answers3