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>

Recommended Answers

All 8 Replies

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.

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!

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)

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

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.

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.

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

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

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.