javascript calculate time between times

Question

pietpiraat 0 Light Poster

14 Years Ago

Hello all,

i'm trying to show the time between a start & end time selection, problem is, i do not know my way around javascript/jquery that good, so i hoop someone will help me.

i have four dropdown select boxes:

start hour
start minute
end hour
end minute

like the ones down here ( only longer of course ).
Here are my inputs i would like to use:

<select id="starttimehour" name="starttimehour" class="selectboxkl">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>	
<option value="04">04</option>							
</select>
<select id="starttimemin" name="starttimemin" class="selectboxkl">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>	
<option value="04">04</option>							
</select>
<select id="endtimehour" name="endtimehour" class="selectboxkl">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>	
<option value="04">04</option>							
</select>
<select id="endtimemin" name="endtimemin" class="selectboxkl">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>	
<option value="04">04</option>							
</select>

javascript jquery

4 Contributors
8 Replies
2K Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

gumape 3 Newbie Poster

14 Years Ago

Use the Date object and the onchange event:

<head>
    <script>
        function RecalculateElapsedTime () {
            var startHSelect = document.getElementById ("starttimehour");
            var startMSelect = document.getElementById ("starttimemin");
            var endHSelect = document.getElementById ("endtimehour");
            var endMSelect = document.getElementById ("endtimemin");

				// convert string values to integers
			var startH = parseInt (startHSelect.value);
			var startM = parseInt (startMSelect.value);
			var endH = parseInt (endHSelect.value);
			var endM = parseInt (endMSelect.value);

				// create Date objects from start and end
			var start = new Date ();	// the current date and time, in local time.
			var end = new Date ();	// the current date and time, in local time.

			start.setHours (startH, startM);
			end.setHours (endH, endM);

			var elapsedInMS = end.getTime () - start.getTime ();
			var elapsedSpan = document.getElementById ("elapsed");
			elapsedSpan.innerHTML = "" + (elapsedInMS / 1000 / 60);
        }
 
        function Init () {
			RecalculateElapsedTime ();
        }
    </script>
</head>
<body onload="Init ()">
	h:
	<select id="starttimehour" name="starttimehour" onchange="RecalculateElapsedTime ()" class="selectboxkl">
		<option value="00">00</option>
		<option value="01">01</option>
		<option value="02">02</option>
		<option value="03">03</option>	
		<option value="04">04</option>							
	</select>
	m:
	<select id="starttimemin" name="starttimemin" onchange="RecalculateElapsedTime ()" class="selectboxkl">
		<option value="00">00</option>
		<option value="01">01</option>
		<option value="02">02</option>
		<option value="03">03</option>	
		<option value="04">04</option>							
	</select>
	-
	h:
	<select id="endtimehour" name="endtimehour" onchange="RecalculateElapsedTime ()" class="selectboxkl">
		<option value="00">00</option>
		<option value="01">01</option>
		<option value="02">02</option>
		<option value="03">03</option>	
		<option value="04">04</option>							
	</select>
	m:
	<select id="endtimemin" name="endtimemin" onchange="RecalculateElapsedTime ()" class="selectboxkl">
		<option value="00">00</option>
		<option value="01">01</option>
		<option value="02">02</option>
		<option value="03">03</option>	
		<option value="04">04</option>							
	</select>
	<br /><br />
	Elapsed time in mins: <span id="elapsed"></span>
</body>

For further details and examples, see the following pages:
Date object,
onchange event,
onload event.

Taywin 312 Posting Virtuoso

14 Years Ago

parseInt (startHSelect.value)

This is dangerous and may not give you the right value in your case (string number has leading '0'). Instead, all of your parseInt should be...

parseInt (startHSelect.value, 10)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

pietpiraat 0 Light Poster · Answer 1 · 2010-08-20T18:19:02+00:00

wauw thanks alot i'll try this out and let you know if i manag to get the result i wanted.

again thanks for taking the time to help me out!

pietpiraat 0 Light Poster · Answer 2 · 2010-08-20T20:02:21+00:00

I there a way to get the result into an input field ?
i tried this, but it's not working:

<input type="text" name="time" id="elapsed" />

gumape 3 Newbie Poster · Answer 3 · 2010-08-20T20:33:40+00:00

Replace the following lines:

var elapsedSpan = document.getElementById ("elapsed");	
elapsedSpan.innerHTML = "" + (elapsedInMS / 1000 / 60);

to

var elapsedInput = document.getElementById ("elapsed");	
elapsedInput.value = "" + (elapsedInMS / 1000 / 60);

Related links:
value property (input),
innerHTML property.

gumape 3 Newbie Poster · Answer 4 · 2010-08-20T20:41:11+00:00

parseInt (startHSelect.value)
This is dangerous and may not give you the right value in your case (string number has leading '0'). Instead, all of your parseInt should be...
parseInt (startHSelect.value, 10)

You are right, but it cannot cause a problem in that case, because the 01, 02, ..., 07 octal numbers are 1, 2, ..., 7 in decimal format and the selection lists do not contain other octal values.

pietpiraat 0 Light Poster · Answer 5 · 2010-08-21T02:56:47+00:00

Thanks à lot all is working great.

THE final thing i'm looking for now is to show THE time between in hours and seconds instead of minutes only.
Then i have exactly what was looking for.

Although i'm very gratefull to you Guys with THE code as it is right now ! Gumape/taywin

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2010-08-21T22:11:55+00:00

Piet,

Try this, including both 'minutes' and 'hours:minutes' presentation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
select.selectboxkl { width: 40px; }
input.timedifference { width: 40px; text-align:right; }
</style>
<script>
onload = function() {
	var startHSelect = document.getElementById("starttimehour");
	var startMSelect = document.getElementById("starttimemin");
	var endHSelect   = document.getElementById("endtimehour");
	var endMSelect   = document.getElementById("endtimemin");
	var elapsed1  = document.getElementById("elapsed1");
	var elapsed2  = document.getElementById("elapsed2");

	function populateSelect(menu, n){
		var i, opt;
		for(i=0; i<n; i++){
			opt = document.createElement('option');
			opt.innerHTML = (i<=9) ? ('0'+i) : i;
			opt.value = i;
			menu.appendChild(opt);
		}
	}
	populateSelect(startHSelect, 24);
	populateSelect(startMSelect, 60);
	populateSelect(endHSelect, 24);
	populateSelect(endMSelect, 60);
	
	function timeDifference(){
		var startH = parseInt(startHSelect.value, 10);
		var startM = parseInt(startMSelect.value, 10);
		var endH   = parseInt(endHSelect.value, 10);
		var endM   = parseInt(endMSelect.value, 10);

		var hours = Number(endHSelect.value) - Number(startHSelect.value);
		var mins  = Number(endMSelect.value) - Number(startMSelect.value);
		mins = mins + 60 * hours;
		if(mins < 0 ) { mins += 24 * 60 }//if difference is negative, then assume carry-over to next day.
		elapsed1.value = mins;
		var m = mins%60;
		var h = parseInt(mins/60);
		elapsed2.value = h + ':' + ((m<=9) ? ('0'+m) : m);
	}

	startHSelect.onchange = startMSelect.onchange = endHSelect.onchange = endMSelect.onchange = timeDifference;
	timeDifference();
}
</script>
</head>
<body>
	h:&nbsp;<select id="starttimehour" name="starttimehour" class="selectboxkl"></select>&nbsp;
	m:&nbsp;<select id="starttimemin" name="starttimemin" class="selectboxkl"></select>&nbsp;
	-&nbsp;
	h:&nbsp;<select id="endtimehour" name="endtimehour" class="selectboxkl"></select>&nbsp;
	m:&nbsp;<select id="endtimemin" name="endtimemin" class="selectboxkl"></select>
	<br /><br />
	<input type="text" name="time1" id="elapsed1" class="timedifference" />&nbsp;<i>minutes</i><br /><br />
	<input type="text" name="time2" id="elapsed2" class="timedifference" />&nbsp;<i>hours:minutes</i>
</body>
</html>

Note how the select menus are populated by a javascript function to avoid lengthy HTML.

Direct subtraction of hours and minutes will be more efficient than using to Date objects - (not that modern, fast PCs will care very much).

You may not want "midnight carry-over", in which case delete line 41.

Airshow