Kusum Kusum - 5 months ago 10
Javascript Question

Substract two times and display the result in third textbox automatically

Textbox3 shows the start time of a procedure and TextBox4 shows the end time of the same procedure. I would like it if the textboxes were in a 12 hour clock showing an am/pm tag on the textbox's. Then in Textbox2 it would show the differance between Textbox3 and Textbox4 in Hours and Minutes.

For Example:

In Time: 9:00 AM
Out Time : 6:00 PM


Then result will display here

Approx Time : 9


If input is like this

In Time: 9:00 AM
Out time: 6.05 PM


Then result should

Approx Time: 9:05


![enter image description here

JavaScript code:

function calculateTime() {

var valuestart = $("[id$=TextBox3]").pickatime({ interval: 1 }).val();
var valuestop = $("[id$=TextBox4]").pickatime({ interval: 1 }).val();


var timeStart = new Date("01/01/2010 " + valuestart);
var timeEnd = new Date("01/01/2010 " + valuestop);

var difference = timeEnd - timeStart;
var diff_result = new Date(difference);

var hourDiff = diff_result.getHours();

document.getElementById("TextBox2").innerHTML = hourDiff;

}
$("select").change(calculateTime);
calculateTime();


I tried this above code but unable to get the result. I am new in JavaScript. So please help me to do so.

Getting this error,

Error Image

![enter image description here

Answer

I edited my answer, because the previous one was inefficient.

To get the difference between In Time and Out Time, do as instructed below:

First, let's get the values of the In Time and Out Time textboxes:

// Declare the variables
var valuestart = document.getElementById("in-time-textbox").value,
    valuestop = document.getElementById("in-time-textbox").value;

/* I left it the same as you had it */
var timeStart = new Date("01/01/2010 " + valuestart),
    timeEnd = new Date("01/01/2010 " + valuestop);
  • I don't use jQuery, so the pickatime() method you use is not available to me.
  • So instead, I will just assume that the values are typed inside their respective textboxes as in a normal textbox.

Then, let's go on with the calculation:

/* Determine the value of the variable via a conditional ternary operator */
var hourDiff = (((timeEnd.getHours() - timeStart.getHours()) > 0) ?
               (timeEnd - timeStart) / 3600000 + " Hours" :
               (((timeEnd.getMinutes() - timeStart.getMinutes()) > 0) ?
               (timeEnd.getMinutes() - timeStart.getMinutes()) + " Minutes" :
               (timeEnd.getSeconds() - timeStart.getSeconds()) + " Seconds"));

/* Alternatively you can do this with an If/Else if/Else statement */
if ((timeEnd.getHours() - timeStart.getHours()) > 0) {
    hourDiff = (timeEnd - timeStart) / 3600000 + " Hours";  // 1 Hour = 3.6 * 10^6 ms
}
else if ((timeEnd.getMinutes() - timeStart.getMinutes()) > 0) {
    hourDiff = (timeEnd.getMinutes() - timeStart.getMinutes()) + " Minutes";
}
else {
    hourDiff = (timeEnd.getSeconds() - timeStart.getSeconds()) + " Seconds";
}
  • When it comes to setting variables based on different conditions I prefer to use the ternary operator since it is more succinct.

  • I have also included an if/else if/else version in case you are not familiar with it.


Finally, we can output the result:

// Output the result
document.getElementById("TextBox2").value = hourDiff; /* I left the ID the same */

I have created a CodePen for a better, more visual representation of it working as wanted.