How to calculate date difference between two text inputs?

Question

I have simple form which consists checkin and checkout dates. I need to calculate the date difference according to the user input and display. My code looks like below.

<tr>
<td class="searchFormSpace">Check in</td>
<td width="10px"></td>
<td><input name="checkinText" type="text" class="date" id="fromDatePicker" type="text" value="Select date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Select date';}"></td>

<td width="20px"></td>
<td class="searchFormSpace">Check out</td>
<td width="10px"></td>
<td><input name="checkoutText" type="text" class="date" id="toDatePicker" type="text" value="Select date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Select date';} " onchange=""></td>

<td width="20px"></td>
<td>Nights</td>
<td width="10px"></td>
<td><input style="width: 30px" type="text" name="noOfNightsText" id="noOfNightsText" ></td>

How to do this?

This is what I tried :

function dateDiff() {
try {
    var d2=document.getElementById("toDatePicker").value;
    var d1=document.getElementById("fromDatePicker").value;


    alert(d2);


    var t2 = d2.value.getTime();
    var t1 = d1.value.getTime();

    alert(parseInt((t2-t1)/(24*3600*1000)));
}
catch(ex) {
    alert(ex);
}

}

But It didn't work.

we're here to help you figure out problems you encounter. Not solve the questions you have. Try something first, and if that doesn't work, tell us what you tried. Then we can help! — Rene Pot, May 19 '14 at 08:49
You can create javascript Date objects passing in the value of the inputs (`var date1 = new Date(...);`, and then use the Date objects to do your calculations — , May 19 '14 at 08:53
Based on your edit, `var t2 = new Date(d2);` to create a new Date (assuming d2 is a valid date string, then `t2.getTime();` — , May 19 '14 at 09:02

Kanishk Dudeja · Accepted Answer · 2014-05-19T09:09:34.837

1

Assuming you have two Date objects(JavaScript Objects), you can just subtract them to get the difference in milliseconds.

You will need to check compatibility of formats between the output of the datepicker you are using and the JavaScript Date Class Constructor.

Please refer to the code below:

var date1 = new Date(document.getElementById("fromDatePicker").value);
var date2 = new Date(document.getElementById("toDatePicker").value);

var difference = date2 - date1;

var days = difference/(24*3600*1000);

edited May 19 '14 at 09:09

answered May 19 '14 at 08:52

Kanishk Dudeja

1,201
3
17
33

Two big problems with this answer: 1. The first sentence is plagiarized without attribution and with missing formatting from [How to calculate date difference in JavaScript?](/a/7763335/4642212). 2. The correct API is to get the `valueAsDate` property. What this answer is doing is passing the string from the `value` property to the `Date` constructor, which is wrong. _“Parsing of date strings with the `Date` constructor […] is **strongly discouraged** […]”_ — From the [documentation](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#parameters). – Sebastian Simon Dec 14 '21 at 19:38

score 1 · Answer 2 · answered May 13 '22 at 07:54

function dateDiff() {
  var d2 = document.getElementById("aa").value;
  var d1 = document.getElementById("bb").value;

  var t2 = new Date(d2);
  var t1 = new Date(d1);

  alert((t1 - t2) / (24 * 3600 * 1000));
}

<p>Check in</p> <input type="date" name="date" id="aa">
<p>Check out</p> <input type="date" name="date" id="bb">
<button onclick="dateDiff()">here</button>

`

score 0 · Answer 3 · answered May 19 '14 at 09:05

I believe the problem that is happening in here that the value property of the elements are strings. You have to first parse them and convert them to Date object: new Date(document.getElementById("toDatePicker").value);

function dateDiff() {
    var d2=document.getElementById("toDatePicker").value;
    var d1=document.getElementById("fromDatePicker").value;

    var t2 = new Date(d2);
    var t1 = new Date(d1);

    alert((t2-t1) / (24*3600*1000));
    // You should get the number of days in between in here.

}

How to calculate date difference between two text inputs?

3 Answers3

Linked

Related