Asp:textbox Hour Difference With Javascript "onchange"

I need some help here, I have three in my form and I need to calculate the time difference between 2 of them (and set the difference value on the third). I have

Solution 1:

it should be something similar to :

$('#TBEnd1').on('change',function() 
{
  var start_time = $('#TBStart1').val();
  var end_time = $('#TBEnd1').val();

  var diff =  newDate(end_time) - newDate( start_time);  



  $('#TBDuration1').val(diff);
}

Solution 2:

Finally, I found a solution for this.

I had to change my <asp.TextBox> to <input/>. I found the script in this URL: https://www.linuxito.com/programacion/483-como-restar-horas-en-javascript

Here is the code:

SCRIPT:

functionHourDifference() {

        start = document.getElementById("start").value;
        end = document.getElementById("end").value;

        startMinutes = parseInt(start.substr(3, 2));
        startHours = parseInt(start.substr(0, 2));
        endMinutes = parseInt(end.substr(3, 2));
        endHours = parseInt(end.substr(0, 2));

        minutesDiff = endMinutes - startMinutes;
        hoursDiff = endHours - startHours;

        if (minutesDiff < 0) {
            hoursDiff --;
            minutesDiff = 60 + minutesDiff;
        }

        if (minutesDiff < 10) {
            minutesDiff = "0" + minutesDiff;
        }

        if (hoursDiff < 0) {
            hoursDiff = 24 + hoursDiff;
        }

        hours = hoursDiff.toString();
        minutes = minutesDiff.toString();

        if (hours.length < 2) {
            hours = "0" + hours;
        }

        if (minutes.length < 2) {
            minutes = minutes + "0";
        }

        document.getElementById("difference").value = hours + ":" + minutes;
        }

HTML:

<p><input type="text"id="start" value=""/></p>

<p><input type="text"id="end" value="" onchange="HourDifference();" /></p>

<p><input type="text"id="difference" value="" /></p>

This is working ok.

Important:

The input format should be "HH:mm" (if 1:00 am, is 01:00; if 1:00 pm, is 13:00).

Solution 3:

The below code will obtain a datetime in text format and find the difference in hours and minutes. I hope this will meet your requirements or at least push you on the right tracks.

HTML

<div id="textBoxOne">
2016-09-20 20:00:00
</div>
<div id="textBoxTwo">
2016-09-23 20:31:00
</div>
<div id="ShowTimeBetweenDates">

</div> 

Javascript

var dateOne = document.getElementById("textBoxOne").innerHTML;
var dateTwo = document.getElementById("textBoxTwo").innerHTML;
var diff =  (newDate(dateOne) - newDate(dateTwo))
var totalHours = Math.floor(Math.abs(diff/ 3600 / 1000));
var totalMinutes = Math.abs(((diff % 86400000) % 3600000) / 60000); 
var showTimeDiff = document.getElementById("ShowTimeBetweenDates");
showTimeDiff.innerHTML = "Time Diff : " + totalHours + " : " + totalMinutes;

result

2016-09-20 20:00:00

2016-09-23 20:31:00

Time Diff : 72 : 31

Fiddle Here

Recommendations

Instead of parsing it like this and using a text box Jquery provides "jquery ui date parser" a simple way to obtain a date object, you can use a date picker with this. Check it out found here

hope this helps, best of luck