?
Solved

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

Posted on 2006-05-15
9
Medium Priority
?
530 Views
Last Modified: 2008-02-26
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
Comment
Question by:DataDesignIT
  • 5
  • 4
9 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
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>
<head>
<title>Time calculator</title>
<script type="text/javascript">
function stripLeadingZero(val) {
    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];
       h1 = stripLeadingZero(h1);
       m1 = stripLeadingZero(m1);
       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];
       h2 = stripLeadingZero(h2);
       m2 = stripLeadingZero(m2);
       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>
</head>
<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

by:Pravin Asar
ID: 16685121
Here is a code complete..

<html>
<head>
<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";}
}

function stripLeadingZero(val) {
    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];
       h1 = stripLeadingZero(h1);
       m1 = stripLeadingZero(m1);
       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];
       h2 = stripLeadingZero(h2);
       m2 = stripLeadingZero(m2);
       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>
</head>
<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

by:DataDesignIT
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16685236
Look at the last posting.

0
 

Author Comment

by:DataDesignIT
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

by:Pravin Asar
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>
<head>
<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,'');
     }
}
function stripLeadingZero(val) {
    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];
       h1 = stripLeadingZero(h1);
       m1 = stripLeadingZero(m1);
       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];
       h2 = stripLeadingZero(h2);
       m2 = stripLeadingZero(m2);
       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>
</head>
<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

by:DataDesignIT
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>
<head>
<title>Time calculator Version #3</title>
<script type="text/javascript">
 . . . All the goodies . . .
</script>
</head>
<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

by:
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

by:DataDesignIT
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question