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
    TX
    Posts
    7,931

    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
    TX
    Posts
    7,931
    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
    TX
    Posts
    7,931

    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.35831 seconds
  • Memory Usage 2,870KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (3)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (71):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates