www.webdeveloper.com
Results 1 to 11 of 11

Thread: Difference between two time Fields

Hybrid View

  1. #1
    Join Date
    Jul 2014
    Posts
    7

    Difference between two time Fields

    Good Day JS coders and Developers,

    I have been trying to get my Code working, but with out luck,
    I need to calculate the Difference of two time fields and display the result, Overtime Sheet.

    I have two ways of doing this,
    Option A: Dropdown List: jsfiddle.net http://jsfiddle.net/LXztD/6/
    Option B: Text Box : jsfiddle.net http://jsfiddle.net/Naglix/uV3Wr/14/
    Both have there Issues,

    Option A: I have this working with hours, all good. But I want to add Minutes to this, once i do it does not work anymore. If you like to Help me Fix this Code I would Love it.

    Option B: I had it working, As soon as I add an event-listener it will not work.
    As well once you go from 12:00 am over to 1:00 am it give me a Bad Result.
    If you like to Fix this Code, I will Love you even more.

    Well I'm really stuck on this two codes, I'm losing my mind

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    1. you're asking a JQuery question in a JavaScript forum, try the JavaScript frameworks.
    2. Post your code in the appropriate forum tags [CODE][/CODE] for example.

    *** thread moved ***
    Last edited by jedaisoul; 07-22-2014 at 07:26 AM.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Jul 2014
    Posts
    7
    Quote Originally Posted by \\.\ View Post
    1. you're asking a JQuery question in a JavaScript forum, try the JavaScript frameworks.
    Half a Tomato or Full tomato, Tomato is a Tomato. - Will try to re-post, Moderator should have than blocked this or moved it to the Right Forum.
    Quote Originally Posted by \\.\ View Post
    2. Post your code in the appropriate forum tags for example.
    Is JSfiddle.net not good enough? Will put it into [code] tags, Before any more Baseball bat's try to visit any more "nutz".

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Quote Originally Posted by Naglix View Post
    Half a Tomato or Full tomato, Tomato is a Tomato. - Will try to re-post, Moderator should have than blocked this or moved it to the Right Forum.
    Not when the Tomato is written in JavaScript then its a wolf in sheeps clothing or is that a sheep in wolves clothing..? Basically a framework is just that, a framework and not actually the native code or service or more simpler, JQuery is soemthing you have to include where as JavaScript is native to the browser.

    Is JSfiddle.net not good enough? Will put it into [code] tags, Before any more Baseball bat's try to visit any more "nutz".
    Not when the majority of people here don't want the hassle of following links, if you want help, post your code.

    You have to appreciate that people who help here do so freely and without any kind of recompense, therefore you should respect that and do as much as you can to limit their time trundling around the internet. If someone whats to post their code on pastebin, codepen, or whatever, then that is fine but post the bit that you are having problems with in the forum.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    May 2014
    Posts
    909
    The select version is an excellent example of what I mean by "jQuery for NOTHING" -- it's really not gaining you anything on a task like this.

    -- edit -- see code in next post, one here was crap.

    It's almost the same code size as your jQuery version, but doesn't even need jQuery. Hell, I've got functions in there copied from another library and it's STILL smaller than the 'framework' version... and I've got it in an anonymous function to boot! namespace conflicts? what namespace conflicts?

    On things like this, "frameworks" like jQuery remove you too much from how the underlying code works.

    For that second one -- I really can't quite figure out how you were trying to solve it there; but with something like time, I'd be using a lot more code to double, triple and quadruple check what people were typing in.
    Last edited by deathshadow; 07-22-2014 at 07:57 AM.
    Java is to JavaScript as Ham is to Hamburger.

  6. #6
    Join Date
    May 2014
    Posts
    909
    Oh, and as to minutes, you're using getHours, do you see the problem with that?

    This version will work with minutes, it uses the UTC versions so the time-zone offset doesn't interfere (something that can drive you nutters with getHours...)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <title>
    	&lt;SELECT&gt; Time Difference Demo
    </title>
    
    </head><body>
    
    <h1>
    	<code>&lt;SELECT&gt;</code> Time Difference Demo
    </h1>
    
    <div><!-- since SELECT cannot be a direct child of BODY! -->
    
    	<select name="timestart" id="timeStart">
    		<option value="00:00:00">12:00 am</option>
    		<option value="01:00:00">1:00 am</option>
    		<option value="02:00:00">2:00 am</option>
    		<option value="03:00:00">3:00 am</option>
    		<option value="04:00:00">4:00 am</option>
    		<option value="05:00:00">5:00 am</option>
    		<option value="06:00:00">6:00 am</option>
    		<option value="07:00:00">7:00 am</option>
    		<option value="08:00:00">8:00 am</option>
    		<option value="09:00:00">9:00 am</option>
    		<option value="10:00:00">10:00 am</option>
    		<option value="11:00:00">11:00 am</option>
    		<option value="12:00:00">12:00 pm</option>
    		<option value="13:00:00">1:00 pm</option>
    		<option value="14:00:00">2:00 pm</option>
    		<option value="15:00:00">3:00 pm</option>
    		<option value="16:00:00">4:00 pm</option>
    		<option value="17:00:00">5:00 pm</option>
    		<option value="18:00:00">6:00 pm</option>
    		<option value="19:00:00">7:00 pm</option>
    		<option value="20:00:00">8:00 pm</option>
    		<option value="21:00:00">9:00 pm</option>
    		<option value="22:00:00">10:00 pm</option>
    		<option value="23:00:00">11:00 pm</option>
    	</select>
    
    	<select name="timestop" id="timeStop">
    		<option value="00:00:00">12:00 am</option>
    		<option value="00:30:00">12:30 am</option>
    		<option value="01:00:00">1:00 am</option>
    		<option value="02:00:00">2:00 am</option>
    		<option value="03:00:00">3:00 am</option>
    		<option value="04:00:00">4:00 am</option>
    		<option value="05:00:00">5:00 am</option>
    		<option value="06:00:00">6:00 am</option>
    		<option value="07:00:00">7:00 am</option>
    		<option value="08:00:00">8:00 am</option>
    		<option value="09:00:00">9:00 am</option>
    		<option value="10:00:00">10:00 am</option>
    		<option value="11:00:00">11:00 am</option>
    		<option value="12:00:00">12:00 pm</option>
    		<option value="13:00:00">1:00 pm</option>
    		<option value="14:00:00">2:00 pm</option>
    		<option value="15:00:00">3:00 pm</option>
    		<option value="16:00:00">4:00 pm</option>
    		<option value="17:00:00">5:00 pm</option>
    		<option value="18:00:00">6:00 pm</option>
    		<option value="19:00:00">7:00 pm</option>
    		<option value="20:00:00">8:00 pm</option>
    		<option value="21:00:00">9:00 pm</option>
    		<option value="22:00:00">10:00 pm</option>
    		<option value="23:00:00">11:00 pm</option>
    	</select>
    </div>
    
    <p>
    	Difference: <span id="timeDiff">0</span>
    </p>
        
    <script type="text/javascript"><!--
    
    (function(d) {
    
    	var
    		start = d.getElementById('timeStart'),
    		stop = d.getElementById('timeStop'),
    		diff = d.getElementById('timeDiff');
    		
    	function textReplace(e, txt) {
    		if (e.textContent) e.textContent = txt;
    			else e.innerText = txt;
    	}
    
    	function addEvent(e, event, handler) {
    		if (e.addEventListener) e.addEventListener(event, handler, false);
    			else e.attachEvent('on' + event, handler);
    	}
    
    	function selectHours(e) {
    		return new Date(
    			'01/01/1971 ' + e.options[e.selectedIndex].value
    		).getTime(); 
    	}
    	
    	function calcTime(e) {
    		d = new Date(selectHours(stop) - selectHours(start));
    		textReplace(diff, d.getUTCHours() + ':' + d.getUTCMinutes());
    	}
    	
    	addEvent(start, 'change', calcTime);
    	addEvent(stop, 'change', calcTime);
    
    })(document);
    
    --></script>
      
    </body></html>
    Beware though, instead of negative hours it will return a 24 hour rollover... which is actually more accurate if you think about it. If the start time is 7am, and the end time is 1am, that would be 1am the next day, so 18 hours later!
    Last edited by deathshadow; 07-22-2014 at 08:01 AM.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Jul 2014
    Posts
    7
    @ Deathshadow:
    Thank you kindly for your reply and code, The reason i don't have much html is that i only need the java code for my application, the html i just quickly dotted down to test the Javacode, BUT I truly appreciate the help given from you, Will work through the code.

    @//./:
    Stop Posting please, you have no value or are a contribution to this forum.

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Quote Originally Posted by Naglix View Post
    @//./:
    Stop Posting please, you have no value or are a contribution to this forum.
    Excuse me for breathing, just trying to point you towards a quicker answer. Had you been using actual JavaScript and not JQuery then your answer would have been much quicker.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  9. #9
    Join Date
    Jul 2014
    Posts
    7
    DeathShadow:

    I truly Want to say Thank you for your Help, This is Perfect.
    Have one Question, I have tried getting Minutes into this or half hour Intervals, do i have to add this into the
    Code:
     function calcTime(e) {
    		d = new Date(selectHours(stop) - selectHours(start));
    		textReplace(diff, d.getUTCHours() + ':' + d.getUTCMinutes());
    or does this code change drastically to accommodate this?
    Thank you kindly for the advise and Assistance

    Kind Regards,
    Naglix

  10. #10
    Join Date
    May 2014
    Posts
    909
    "selectHours" is probably now the wrong name for that function -- it uses getTime() now, which means it returns milliseconds since the unix epoch; which means it can even calculate days, seconds, even milliseconds, months, and years if need be.

    If you wanted to add seconds, just add them to your OPTION tag's VALUE's, then change the output thus:

    d.getUTCHours() + ':' + d.getUTCMinutes() + ':' + d.getUTCSeconds()

    so yes, what's there already handles minutes just fine.
    Java is to JavaScript as Ham is to Hamburger.

  11. #11
    Join Date
    Jul 2014
    Posts
    7
    @DeathShadow,

    Truly thank you for the advice and assistance with this,
    If you come to africa, give me a call, will send you on an awesome trip

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