Solved

# How do I calculate elapsed minutes using combination of three time fields

Posted on 2006-05-15
Medium Priority
530 Views
I have three time fields: StartTime, EndTime, ElapasedMinutes. I need these three fields to work as a collective unit. I've tried various combinations, but I can't come across an elegant solution. I know I can't be the first to come up against this.

I have three scenarios:

1) Times are manually entered into the StartTime and EndTime fields in military time (e.g., 10:45 and 12:45). The Elapsed minutes are automatically calculated (i.e., 120).

2) The EndTime is entered (e.g., 12:45) and the Elapsed minutes (e.g.. 120). The StartTime is automatically caluclated and completed (i.e., 10:45).

3) The StartTime is entered (e.g., 10:45) and the Elapsed minutes (e.g.. 120). The EndTime is automatically caluclated and completed (i.e., 12:45).

All these calculations should occur on onChange events, so if any one of the fields is altered the other two fields are automatically computed. That way, the user only needs to complete 2 of the 3 fields--whichever fits in with the workflow they are handling.

0
• 5
• 4

LVL 29

Expert Comment

ID: 16684804
Here is a sample :

1) Times are manually entered into the StartTime and EndTime fields in military time (e.g., 10:45 and 12:45). The Elapsed minutes are automatically calculated (i.e., 120).

<html>
<title>Time calculator</title>
<script type="text/javascript">
var out=val;
if (val.match(/^0/)) {
out= val.replace(/^0/,'');
}
return  out;
}
function CalcTime(t1, t2) {
var tval1 = t1.value.split(':');
var h1 = tval1[0];
var m1 = tval1[1].split(/[a|A|p|P]/)[0];
if (tval1[1].match(/[P|p]/)) {
if (parseInt(h1) < 12) {
h1 = 12+parseInt(h1);
}
}
var tval2 = t2.value.split(':');

var h2 = tval2[0];
var m2 = tval2[1].split(/[a|A|p|P]/)[0];
if (tval2[1].match(/[P|p]/)) {
if (parseInt(h2) < 12) {
h2 = 12+parseInt(h2);
}
}
var diff = (parseInt(h2)-parseInt(h1)) * 60 + (parseInt(m2)-parseInt(m1));
var dh1 = parseInt(diff/60);
var dm1 = diff - dh1*60
if (dh1 < 10) { dh1 = '0' + dh1; }
if (dm1 < 10) { dm1 = '0' + dm1; }
var str = '' + dh1 + ':' + dm1;
t2.form.LegenthofIncident.value = str;
}
</script>
<body>
<form name="form1" method="post" action="">
<br>Start Time
<input type="text" name="TimePage" maxlength="8" size="8" onkeyup="formatTime(this);" onBlur="CalcTime(this, this.form.TimeClear);" />
<br>End Time
<input type="text" name="TimeClear" maxlength="8" size="8" onkeyup="formatTime(this);" onBlur="CalcTime(this.form.TimePage, this);" />
<br>Calcuated Time difference (Hours:Minutes)
<input type="text" name="LegenthofIncident" maxlength="8" size="8" readonly />
</form>
</body>
</html>
0

LVL 29

Expert Comment

ID: 16685121
Here is a code complete..

<html>
<title>Time calculator</title>
<script type="text/javascript">
function formatTime(strField){
var oLen = strField.value.length;
if(oLen == 2){strField.value += ":";}
if(oLen == 5){strField.value += " ";}
if(oLen == 7){strField.value += "m";}
}

var out=val;
if (val.match(/^0/)) {
out= val.replace(/^0/,'');
}
return  out;
}
function CalcTime(t1, t2, t3) {
if (!t1.value.length || !t2.value.length) { return; }
var tval1 = t1.value.split(':');
var h1 = tval1[0];
var m1 = tval1[1].split(/[a|A|p|P]/)[0];
if (tval1[1].match(/[P|p]/)) {
if (parseInt(h1) < 12) {
h1 = 12+parseInt(h1);
}
}
var tval2 = t2.value.split(':');

var h2 = tval2[0];
var m2 = tval2[1].split(/[a|A|p|P]/)[0];
if (tval2[1].match(/[P|p]/)) {
if (parseInt(h2) < 12) {
h2 = 12+parseInt(h2);
}
}
if (t3.name.match('DiffTime')) {
var diff = (parseInt(h2)-parseInt(h1)) * 60 + (parseInt(m2)-parseInt(m1));
var dh1 = parseInt(diff/60);
var dm1 = diff - dh1*60
}
if (t3.name.match('EndTime')) {
var diff = (parseInt(h1)+parseInt(h2)) * 60 + (parseInt(m1)+parseInt(m2));
var dh1 = parseInt(diff/60);
var dm1 = diff - dh1*60
}
if (t3.name.match('StartTime')) {
var diff = (parseInt(h1)-parseInt(h2)) * 60 + (parseInt(m1)-parseInt(m2));
var dh1 = parseInt(diff/60);
var dm1 = diff - dh1*60
}
if (dh1 < 10) { dh1 = '0' + dh1; }
if (dm1 < 10) { dm1 = '0' + dm1; }
var str = '' + dh1 + ':' + dm1;
t3.value = str;
}
</script>
<body>
All Time entries are in format HH:MM

<form name="form1" method="post" action="">
<h3>Calculate Difference </h3>
Start Time
<input type="text" name="StartTime" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this, this.form.EndTime, this.form.DiffTime);" />
<br>End Time
<input type="text" name="EndTime" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this.form.StartTime, this,  this.form.DiffTime);" />
<br>Calcuated Time
<input type="text" name="DiffTime" maxlength="8" size="8" style="background-color:#779977;" readonly />
<br>
<br>
<br>
<br>
<h3>Calculate End Time </h3>
Start Time
<input type="text" name="StartTime1" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this, this.form.DiffTime1, this.form.EndTime1);" />
<br>Time difference
<input type="text" name="DiffTime1" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this.form.StartTime1, this.form.DiffTime1, this.form.EndTime1);"  />
<br>Calcuated End Time
<input type="text" name="EndTime1" maxlength="8" size="8" style="background-color:#779977;"  readonly />
<br>
<br>
<br>
<br>
<h3>Calculate Start Time </h3>
End Time
<input type="text" name="EndTime2" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this, this.form.DiffTime2, this.form.StartTime2);" />
<br> Time difference
<input type="text" name="DiffTime2" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this.form.EndTime2, this.form.DiffTime2, this.form.StartTime2);"  />
<br>Calcuated Start Time
<input type="text" name="StartTime2" maxlength="8" size="8" style="background-color:#779977;" readonly />

</form>
</body>
</html>
0

Author Comment

ID: 16685211
This handles one of the three scenarios. I'm looking for a form that only has three fields--two of which are formatted HH:MM, the other one is just an integer. Data-entry should be allowable in all three fields.
0

LVL 29

Expert Comment

ID: 16685236
Look at the last posting.

0

Author Comment

ID: 16685287
I did review the last posting... When I review and test I see three forms. I need one form with three enterable fields. Also, the Time Difference field must be a calculated integer, not in the form of HH:MM
0

LVL 29

Expert Comment

ID: 16685443
I provide you this last post which does the trick of converting difference into minutes/

No big deal -- simple math ..

So far which one to calculate is always dilema..

My code is very flexibile... and simple to implement/integrate..

I am off for the day..

<html>
<title>Time calculator Version #3</title>
<script type="text/javascript">
function formatTime(strField){
var oLen = strField.value.length;
if(oLen == 2){strField.value += ":";}
if(oLen == 5){strField.value += " ";}
if(oLen == 7){strField.value += "m";}
}
function formatInt(fld) {
if(fld.value.match(/[^0-9]/)) {
fld.value=fld.value.replace(/[^0-9]/g,'');
}
}
var out=val;
if (val.match(/^0/)) {
out= val.replace(/^0/,'');
}
return  out;
}
function CalcTime(t1, t2, t3) {
if (!t1.value.length || !t2.value.length) { return; }
var tval1 = t1.value.split(':');
var h1 = tval1[0];
var m1 = tval1[1].split(/[a|A|p|P]/)[0];
if (tval1[1].match(/[P|p]/)) {
if (parseInt(h1) < 12) {
h1 = 12+parseInt(h1);
}
}

if (t2.name.match('DiffTime')) {
var tval2 = t2.value;
var h2 = parseInt(tval2)/60;
if (h2 > 0) {
var m2 = parseInt(tval2)%60;
}
else {
var m2 = parseInt (tval2);
}
}
else {
var tval2 = t2.value.split(':');

var h2 = tval2[0];
var m2 = tval2[1].split(/[a|A|p|P]/)[0];
if (tval2[1].match(/[P|p]/)) {
if (parseInt(h2) < 12) {
h2 = 12+parseInt(h2);
}
}
}
if (t3.name.match('DiffTime')) {
var diff = (parseInt(h2)-parseInt(h1)) * 60 + (parseInt(m2)-parseInt(m1));
var dh1 = parseInt(diff/60);
var dm1 = diff - dh1*60;
}
if (t3.name.match('EndTime')) {
var diff = (parseInt(h1)+parseInt(h2)) * 60 + (parseInt(m1)+parseInt(m2));
var dh1 = parseInt(diff/60);
var dm1 = diff - dh1*60
}
if (t3.name.match('StartTime')) {
var diff = (parseInt(h1)-parseInt(h2)) * 60 + (parseInt(m1)-parseInt(m2));
var dh1 = parseInt(diff/60);
var dm1 = diff - dh1*60
}
if (t3.name.match('DiffTime')) {
t3.value = diff;
}
else {
if (dh1 < 10) { dh1 = '0' + dh1; }
if (dm1 < 10) { dm1 = '0' + dm1; }
var str = '' + dh1 + ':' + dm1;
t3.value = str;
}
}
</script>
<body>
All Time entries are in format HH:MM

<form name="form1" method="post" action="">
<h3>Calculate Difference </h3>
Start Time  (HH:MM AM/PM)
<input type="text" name="StartTime" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this, this.form.EndTime, this.form.DiffTime);" />
<br>End Time  (HH:MM AM/PM)
<input type="text" name="EndTime" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this.form.StartTime, this,  this.form.DiffTime);" />
<br>Calcuated Time (Minutes)
<input type="text" name="DiffTime" maxlength="8" size="8" style="background-color:#779977;" readonly />
<br>
<br>
<br>
<br>
<h3>Calculate End Time </h3>
Start Time (HH:MM AM/PM)
<input type="text" name="StartTime1" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this, this.form.DiffTime1, this.form.EndTime1);" />
<br>Time difference (Minutes)
<input type="text" name="DiffTime1" maxlength="8" size="8" onkeyup="formatInt(this);"
onBlur="CalcTime(this.form.StartTime1, this.form.DiffTime1, this.form.EndTime1);"  />
<br>Calcuated End Time  (HH:MM )
<input type="text" name="EndTime1" maxlength="8" size="8" style="background-color:#779977;"  readonly />
<br>
<br>
<br>
<br>
<h3>Calculate Start Time </h3>
End Time   (HH:MM AM/PM)
<input type="text" name="EndTime2" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this, this.form.DiffTime2, this.form.StartTime2);" />
<br> Time difference (Minutes)
<input type="text" name="DiffTime2" maxlength="8" size="8"  onkeyup="formatInt(this);"
onBlur="CalcTime(this.form.EndTime2, this.form.DiffTime2, this.form.StartTime2);"  />
<br>Calcuated Start Time  (HH:MM)
<input type="text" name="StartTime2" maxlength="8" size="8" style="background-color:#779977;" readonly />

</form>
</body>
</html>
0

Author Comment

ID: 16686412
Thank you for your prompt response. I guess I'm not being clear, however in the essence of the problem. I only want three fields on the form; not three forms, each with three fields.. The scenarios I outlined are for those three fields--I want them all to interact with one another.

So, the Javascript I need is to support what I've got below:
-------------
<html>
<title>Time calculator Version #3</title>
<script type="text/javascript">
. . . All the goodies . . .
</script>
<body>
All Time entries are in format HH:MM

<form name="form1" method="post" action="">
<h3>Enter data in any two of the three fields</h3>

Start Time  (HH:MM AM/PM)
<input type="text" name="StartTime" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this, this.form.EndTime, this.form.DiffTime);" />

<br>End Time  (HH:MM AM/PM)
<input type="text" name="EndTime" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this.form.StartTime, this,  this.form.DiffTime);" />

<br>Calcuated Time (Minutes)
<input type="text" name="DiffTime" maxlength="8" size="8" />

</form>
</body>
</html>

0

LVL 29

Accepted Solution

Pravin Asar earned 2000 total points
ID: 16689555
The issue here is what to update (I will say a kind of business logic)?

For example : User changes the diff time field value, whether to update start time or end time ?

User changes start time, then assuming he wants to keep elapsed time unchanged, update
end time ??

But this can not happen as you outlined in your question

>>All these calculations should occur on onChange events, so if any one of the fields is altered the other two
>> fields are automatically computed.

Simply because there can be infinite combinations, when elapsed time is changed (start - end).
Should you have buttons to update start time or end time ?? (See the HTML tags below).

I believe the code provided is  very flexible to apply.

<form name="form1" method="post" action="">
<h3>Enter data in any two of the three fields</h3>

Start Time  (HH:MM AM/PM)
<input type="text" name="StartTime" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this, this.form.EndTime, this.form.DiffTime);" />

<br>End Time  (HH:MM AM/PM)
<input type="text" name="EndTime" maxlength="8" size="8" onkeyup="formatTime(this);"
onBlur="CalcTime(this.form.StartTime, this,  this.form.DiffTime);" />
<br>Calculated Time (Minutes)
<input type="text" name="DiffTime" maxlength="8" size="8" />
<input type="button" value="Calc ST"  title="Update Start time" onclick="CalcTime(this.form.EndTime, this.form.DiffTime, this.form.StartTime);">
<input type="button" value="Calc ET" title="Update End time" onclick="CalcTime(this.form.StartTime, this.form.DiffTime, this.form.EndTime);">

</form>
0

Author Comment

ID: 16693191
Thank you. Based on all the code you provided, I was able to get a solution. Appreciate your patience and the abundance of examples--VERY Helpful.
0

## Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be \$37.1B.