Difference between two time Fields

This site is best viewed in a modern browser with JavaScript enabled.

Naglix

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

root

you're asking a JQuery question in a JavaScript forum, try the JavaScript frameworks.
Post your code in the appropriate forum tags [CODE][/CODE] for example.

thread moved

Naglix

\\.\;1347477 wrote:
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.

\\.\;1347477 wrote:
2. Post your code in the appropriate forum tags
for example.

Is JSfiddle.net not good enough? Will put it into

 tags, Before any more Baseball bat's try to visit any more "nutz".

deathshadow

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.

deathshadow

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...)

<!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!

root

Naglix;1347525 wrote:
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
 tags, Before any more Baseball bat's try to visit any more "nutz".[/QUOTE]
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.

Naglix

@ 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.

Naglix

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

 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

deathshadow

"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.

root

Naglix;1347581 wrote:
@//./:
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.

Naglix

@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