www.webdeveloper.com
Results 1 to 4 of 4

Thread: add 2 fields containing time values in hh:mm format

  1. #1
    Join Date
    Sep 2009
    Posts
    3

    add 2 fields containing time values in hh:mm format

    I have an html web form and am looking for a script which adds the value of 2 fields containing time values in hh:mm format

    Example:
    Field 1 has a vaule of "1:45"
    Field 2 has a value of "1:30"
    The desired result should be in a time value "3:15"

    Thank You

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,252

    Lightbulb

    Something like this?...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    </head>
    <body>
    <input id="time1" value="1:45" size="5"> Time 1 <br>
    <input id="time2" value="1:30" size="5"> Time 2 
    <button onclick="document.getElementById('timeSum').value = timeSummation()">Add times</button><br>
    <input id="timeSum" value="" size="5"> Result<br>
    <script type="text/javascript">
    function timeSummation() {
      var t1 = document.getElementById('time1').value.split(':');
      var t2 = document.getElementById('time2').value.split(':');
      var mins = Number(t1[1])+Number(t2[1]);
      var hrs = Math.floor(parseInt(mins / 60));
      hrs = Number(t1[0])+Number(t2[0])+hrs;
      mins = mins % 60;
      return hrs+':'+mins;
    }
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,252
    Minor change to make display as 03:00 to 03:09 rather than 3:0 to 3:9 if summation results were within 10 minutes of an even hour.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    </head>
    <body>
    <input id="time1" value="1:45" size="5"> Time 1 <br>
    <input id="time2" value="1:30" size="5"> Time 2 
    <button onclick="document.getElementById('timeSum').value = timeSummation('time1','time2')">Add times</button>
    <br><input id="timeSum" value="" size="5"> Result<br>
    
    <script type="text/javascript">
    Number.prototype.padDigit = function() { return (this < 10) ? '0'+this : this; }
    function timeSummation(id1, id2) {
      var t1 = document.getElementById(id1).value.split(':');
      var t2 = document.getElementById(id2).value.split(':');
      var mins = Number(t1[1])+Number(t2[1]);
      var hrs = Math.floor(parseInt(mins / 60));
      hrs = Number(t1[0])+Number(t2[0])+hrs;
      mins = mins % 60;
      return hrs.padDigit()+':'+mins.padDigit();
    }
    </script>
    
    </body>
    </html>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,252

    Lightbulb

    While not asked for in original request, I was interested in subtracting the times and correctly displaying results.
    Here is an example of both addition and subtraction. Use the drop-down to setup for the add/sub testing.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    function setTimes(info) {
      var sel = info.split('|');
      document.getElementById('time1').value = sel[0];
      document.getElementById('time2').value = sel[1];
    }
    </script>
    
    </head>
    <body>
    <input id="time1" value="" size="5"> Time 1 <br>
    <input id="time2" value="" size="5"> Time 2
    <button onclick="document.getElementById('timeSum').value = timeAddSub('time1','time2',true)">Add times</button>
    <button onclick="document.getElementById('timeSum').value = timeAddSub('time1','time2',false)">Sub times</button>
    <br><input id="timeSum" value="" size="5"> Result<br>
    Test conditions: <select onchange="setTimes(this.value)">
     <option value="|">Choose test</option>
     <option value="1:45|1:30">1</option>
     <option value="1:45|1:45">2</option>
     <option value="1:30|1:45">3</option>
     <option value="1:30|2:45">4</option>
    <select>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?273699-add-2-fields-containing-time-values-in-hh-mm-format&daysprune=30
    
    Number.prototype.padDigit = function() { return (this < 10) ? '0'+this : ''+this; }
    
    function timeAddSub(id1, id2, flag) {  // flag=true to add values and flag=false to subtract values
      var tt1 = document.getElementById(id1).value;  if (tt1 == '') { return ''; }
      var t1 = tt1.split(':');
      var tt2 = document.getElementById(id2).value;  if (tt2 == '') { return ''; }
      var t2 = tt2.split(':');
      tt1 = Number(t1[0])*60+Number(t1[1]);
      tt2 = Number(t2[0])*60+Number(t2[1]);
      var diff = 0;  if (flag) { diff = tt1 + tt2; } else { diff = tt1 - tt2; }
      t1[0] = Math.abs(Math.floor(parseInt(diff / 60))).padDigit();  // form hours
      t1[1] = Math.abs(diff % 60).padDigit();                        // form minutes
      var tt1 = '';  if (diff < 0) { tt1 = '-'; }                    // check for negative value
      return tt1+t1.join(':');
    }
    </script>
    
    </body>
    </html>
    Them: Why did I do it?
    Me: Just for the fish.
    Them: What fish?
    Me: Just for the halibut.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles