Time overlapping in JS

Hello,

i’m new to JS scripting… I need some help writing this function:

With PHP and MySQL I retrieve a number of starting times and ending times of activities.

f.e. I have 4 activities:

  1. from 09:00:00 to 10:00:00
  2. from 10:00:00 to 11:00:00
  3. from 10:30:00 to 11:00:00
  4. from 09:30:00 to 10:00:00

I put these in a table with a checkbox on each line.

Now I need a JS function that does this:

f.e. When I check the first row (from 9:00 to 10:00), JS checks what other activities overrule these times. So in this case the 4th activity (9:30 to 10:00) will be set inactive.

How to make such a function?

help would be much appreciated :slight_smile:

Thanx in advance!

Jan

You can do all that with either a set of if-elseif statements or a switch block (my preference) to check if the selected start/end times overlap any of the other times.

Post the html and javascript you have so far and we can try to help you get it working.

Hello webdev1958,

I allready put something together, but it is still not working like it has to…
Sorry for my bad code :slight_smile:

<html>
<head>
<script language="javascript">
function mysqlTimeStampToDate(timestamp) {
    //function parses mysql datetime string and returns javascript Date object
    //input has to be in this format: 2007-06-05 15:26:02
    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?: ([0-2][0-9]): ([0-5][0-9]): ([0-5][0-9]))?$/;
    var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
	//alert(parts);
    return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
  }
function checkTable(tabelnaam, keuze){
	var urenvan = [];
	var urentot = [];
	var actok = [];
	var tabel = document.getElementById(tabelnaam);
	var trs = tabel.getElementsByTagName("span");
	for(var i=0;i<trs.length;i++)
	{
		var sp = trs[i].id.split("-");
		if (sp[0]=="actvan"){
			actok.push("NEW");
			urenvan.push(trs[i].innerHTML);
		}else{
			urentot.push(trs[i].innerHTML);
		}
	}
	for(var i in urenvan)
	{
		if (i != keuze){
			van1 = mysqlTimeStampToDate('2010-01-01 '+urenvan[keuze]);
			tot1 = mysqlTimeStampToDate('2010-01-01 '+urentot[keuze]);
			van2 = mysqlTimeStampToDate('2010-01-01 '+urenvan[i]);
			tot2 = mysqlTimeStampToDate('2010-01-01 '+urentot[i]);
			if(van1 > van2 && tot1 < tot2)
			{	//-> Check time is in between start and end time
				actok[i]="NIETOK";
			}else if((van1 > van2 && van1 < tot2) || (tot1 > van2 && tot1 < tot2))
			{	//-> Check start or end time is in between start and end time
				actok[i]="NIETOK";
			}else if(van1==van2 || tot1==tot2)
			{	//-> Check start or end time is at the border of start and end time
				actok[i]="OK";
			}else if(van2 > van1 && tot2 < tot1)
			{	//-> start and end time is in between  the check start and end time.
				actok[i]="OK";
			}
		}
	}
	alert(actok.join('\
'));
	for(var o in actok)
	{
		if(o != keuze){
			var rij = "rij"+o;
			if (actok[o]=="NIETOK"){
				document.getElementById[rij].style.display='none';
			}else{
				document.getElementById[rij].style.display='block';
			}
		}
	}
}
</script>
</head>
<body>
<?php
$uren = array();
$uren[0]["van"] = "09:00:00";
$uren[0]["tot"] = "10:00:00";
$uren[1]["van"] = "09:50:00";
$uren[1]["tot"] = "11:00:00";
$uren[2]["van"] = "11:00:00";
$uren[2]["tot"] = "11:30:00";
$uren[3]["van"] = "09:30:00";
$uren[3]["tot"] = "10:30:00";
//echo "<pre>";
//print_r($uren);
//echo "</pre>";
?>
<table width="500" border="1" id="activiteiten">
<?
foreach($uren as $key => $value){
	?>
	<tr id="rij<?=$key?>"><td><input type="checkbox" name="act<?=$key?>"></td><td><?=$key?></td><td><span id="actvan-<?=$key?>"><?=$value["van"]?></span></td><td><span id="acttot-<?=$key?>"><?=$value["tot"]?></span></td></tr>
	<?
}
?>
</table>
<input type="button" value="test 0" onclick="javascript:checkTable('activiteiten', '0');">
<input type="button" value="test 1" onclick="javascript:checkTable('activiteiten', '1');">
<input type="button" value="test 2" onclick="javascript:checkTable('activiteiten', '2');">
<input type="button" value="test 3" onclick="javascript:checkTable('activiteiten', '3');">
</body>
</html>

I copy and pasted your code and ran it on my local xampp server and your page doesn’t even display properly in my IE9.

Below is the html generated by your code (from View Source in the browser) that is sent back to the browser. In it you can see there is still some php code which obviously shouldn’t be there.

You need to fix your php code so it generates the correct html before playing with the javascript.


<html>
    <head>
        <script language="javascript">
            function mysqlTimeStampToDate(timestamp) {
                //function parses mysql datetime string and returns javascript Date object
                //input has to be in this format: 2007-06-05 15:26:02
                var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?: ([0-2][0-9]): ([0-5][0-9]): ([0-5][0-9]))?$/;
                var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
                //alert(parts);
                return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
            }
            function checkTable(tabelnaam, keuze){
                var urenvan = [];
                var urentot = [];
                var actok = [];
                var tabel = document.getElementById(tabelnaam);
                var trs = tabel.getElementsByTagName("span");
                for(var i=0;i<trs.length;i++)
                {
                    var sp = trs[i].id.split("-");
                    if (sp[0]=="actvan"){
                        actok.push("NEW");
                        urenvan.push(trs[i].innerHTML);
                    }else{
                        urentot.push(trs[i].innerHTML);
                    }
                }
                for(var i in urenvan)
                {
                    if (i != keuze){
                        van1 = mysqlTimeStampToDate('2010-01-01 '+urenvan[keuze]);
                        tot1 = mysqlTimeStampToDate('2010-01-01 '+urentot[keuze]);
                        van2 = mysqlTimeStampToDate('2010-01-01 '+urenvan[i]);
                        tot2 = mysqlTimeStampToDate('2010-01-01 '+urentot[i]);
                        if(van1 > van2 && tot1 < tot2)
                        {    //-> Check time is in between start and end time
                            actok[i]="NIETOK";
                        }else if((van1 > van2 && van1 < tot2) || (tot1 > van2 && tot1 < tot2))
                        {    //-> Check start or end time is in between start and end time
                            actok[i]="NIETOK";
                        }else if(van1==van2 || tot1==tot2)
                        {    //-> Check start or end time is at the border of start and end time
                            actok[i]="OK";
                        }else if(van2 > van1 && tot2 < tot1)
                        {    //-> start and end time is in between  the check start and end time.
                            actok[i]="OK";
                        }
                    }
                }
                alert(actok.join('\
'));
                for(var o in actok)
                {
                    if(o != keuze){
                        var rij = "rij"+o;
                        if (actok[o]=="NIETOK"){
                            document.getElementById[rij].style.display='none';
                        }else{
                            document.getElementById[rij].style.display='block';
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
                <table width="500" border="1" id="activiteiten">
            <?
            [COLOR=#ff0000][B]foreach ($uren as $key => $value) {[/B][/COLOR]
                ?>
                <tr id="rij<?= $key ?>"><td><input type="checkbox" name="act<?= $key ?>"></td><td><?= $key ?></td><td><span id="actvan-<?= $key ?>"><?= $value["van"] ?></span></td><td><span id="acttot-<?= $key ?>"><?= $value["tot"] ?></span></td></tr>
                        <?
                    }
                    ?>
        </table>
        <input type="button" value="test 0" onclick="javascript:checkTable('activiteiten', '0');">
        <input type="button" value="test 1" onclick="javascript:checkTable('activiteiten', '1');">
        <input type="button" value="test 2" onclick="javascript:checkTable('activiteiten', '2');">
        <input type="button" value="test 3" onclick="javascript:checkTable('activiteiten', '3');">
    </body>
</html>

Sorry! I deleted all PHP code:

<html>
<head>
<script language="javascript">
function mysqlTimeStampToDate(timestamp) {
    //function parses mysql datetime string and returns javascript Date object
    //input has to be in this format: 2007-06-05 15:26:02
    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;
    var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
	//alert(parts);
    return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
  }
function checkTable(tablename, choice){
	var timefrom = [];
	var timeuntil = [];
	var actok = [];
	var tabel = document.getElementById(tablename);
	var trs = tabel.getElementsByTagName("span");
	for(var i=0;i<trs.length;i++)
	{
		var sp = trs[i].id.split("-");
		if (sp[0]=="actvan"){
			//alert(sp[0]);
			actok.push("NEW");
			timefrom.push(trs[i].innerHTML);
		}else{
			timeuntil.push(trs[i].innerHTML);
		}
	}
	//alert(timefrom.join('\
'));
	//alert(actok.join('\
'));
	for(var i in timefrom)
	{
		//(StartA < EndB) And (EndA > StartB)
		//alert(i+" voor if");
		if (i != choice){
			//alert(i+" na if");
			van1 = mysqlTimeStampToDate('2010-01-01 '+timefrom[choice]);
			tot1 = mysqlTimeStampToDate('2010-01-01 '+timeuntil[choice]);
			van2 = mysqlTimeStampToDate('2010-01-01 '+timefrom[i]);
			tot2 = mysqlTimeStampToDate('2010-01-01 '+timeuntil[i]);
			//alert(van1+"\\r\
"+tot1+"\\r\
"+van2+"\\r\
"+tot2);
			//alert(timefrom[choice]+"\\r\
"+timeuntil[choice]+"\\r\
"+timefrom[i]+"\\r\
"+timeuntil[i]);
			if(van1 > van2 && tot1 < tot2)
			{	//-> Check time is in between start and end time
				actok[i]="NOTOK";
			}else if((van1 > van2 && van1 < tot2) || (tot1 > van2 && tot1 < tot2))
			{	//-> Check start or end time is in between start and end time
				actok[i]="NOTOK";
			}else if(van1==van2 || tot1==tot2)
			{	//-> Check start or end time is at the border of start and end time
				actok[i]="OK";
			}else if(van2 > van1 && tot2 < tot1)
			{	//-> start and end time is in between  the check start and end time.
				actok[i]="OK";
			}
		}
		//alert(names[i]);
	}
	alert(actok.join('\
'));
	for(var o in actok)
	{
		if(o != choice){
			var rij = "rij"+o;
			alert(rij);
			if (actok[o]=="NOTOK"){
				document.getElementById[rij].style.display='none';
			}else{
				document.getElementById[rij].style.display='block';
			}
		}
	}
}
</script>
</head>
<body>
<table width="500" border="1" id="activiteiten">
<tr id="rij0"><td><input type="checkbox" name="act0"></td><td>0</td><td><span id="actvan-0">09:00:00</span></td><td><span id="acttot-0">10:00:00</span></td></tr>
<tr id="rij1"><td><input type="checkbox" name="act1"></td><td>1</td><td><span id="actvan-1">09:50:00</span></td><td><span id="acttot-0">11:00:00</span></td></tr>
<tr id="rij2"><td><input type="checkbox" name="act2"></td><td>2</td><td><span id="actvan-2">11:00:00</span></td><td><span id="acttot-0">11:30:00</span></td></tr>
<tr id="rij3"><td><input type="checkbox" name="act3"></td><td>3</td><td><span id="actvan-3">09:30:00</span></td><td><span id="acttot-0">10:30:00</span></td></tr>
</table>
<input type="button" value="test 0" onclick="javascript:checkTable('activiteiten', '0');">
<input type="button" value="test 1" onclick="javascript:checkTable('activiteiten', '1');">
<input type="button" value="test 2" onclick="javascript:checkTable('activiteiten', '2');">
<input type="button" value="test 3" onclick="javascript:checkTable('activiteiten', '3');">
</body>
</html>

ok, now the html displays correctly.

In your 1st post you said

When I check the first row (from 9:00 to 10:00), JS checks what other activities overrule these times. So in this case the 4th activity (9:30 to 10:00) will be set inactive.

But I don’t see any onclick event handlers on any of your checkboxes. I am assuming you wrote all the javascript code you posted and so you can’t be new to javascript like you say. So all you need to do is add onclicks to checkboxes like you added onclicks to the buttons, except you don’t need to specify the javascript: protocol, to run a set of if-elseif statements (like you have already used in your code) or a switch block to check if the selected start/end time overlaps any of the other times.

Hi,

I indeed have some PHP programming skills so the JS also goes fine fore me, but i didn’t used JS so much until now :slight_smile:

I changed my code now, and added the onclicks to the checkboxes. And it seems to work fine now when i check a checkbox for the first time, but when I uncheck, we have to see again if the times are OK etc… What is the best way to approach that?

here is the changed code:

<html>
<head>
<script language="javascript">
function mysqlTimeStampToDate(timestamp) {
    //function parses mysql datetime string and returns javascript Date object
    //input has to be in this format: 2007-06-05 15:26:02
    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;
    var parts=timestamp.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');
	//alert(parts);
    return new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);
  }
function checkTable(tabelnaam, keuze){
	var chk1 = document.getElementById("act"+keuze.toString());
	//alert(chk1.checked);
	//if(chk1.checked){		
		var urenvan = [];
		var urentot = [];
		var actok = [];
		var tabel = document.getElementById(tabelnaam);
		var trs = tabel.getElementsByTagName("span");
		for(var i=0;i<trs.length;i++)
		{
			var sp = trs[i].id.split("-");
			if (sp[0]=="actvan"){
				actok.push("NEW");
				urenvan.push(trs[i].innerHTML);
			}else{
				urentot.push(trs[i].innerHTML);
			}
		}
		for(var i in urenvan)
		{
			if (i != keuze){
				van1 = mysqlTimeStampToDate('2010-01-01 '+urenvan[keuze]);
				tot1 = mysqlTimeStampToDate('2010-01-01 '+urentot[keuze]);
				van2 = mysqlTimeStampToDate('2010-01-01 '+urenvan[i]);
				tot2 = mysqlTimeStampToDate('2010-01-01 '+urentot[i]);
				if(van1 > van2 && tot1 < tot2)
				{	//-> Check time is in between start and end time
					actok[i]="NIETOK";
				}else if((van1 > van2 && van1 < tot2) || (tot1 > van2 && tot1 < tot2))
				{	//-> Check start or end time is in between start and end time
					actok[i]="NIETOK";
				}else if(van1==van2 || tot1==tot2)
				{	//-> Check start or end time is at the border of start and end time
					actok[i]="OK";
				}else if(van2 > van1 && tot2 < tot1)
				{	//-> start and end time is in between  the check start and end time.
					actok[i]="OK";
				}
			}
		}
		//alert(actok.join('\
'));
		for(var o=0;o<actok.length;o++)
		{
			var chk = "act"+o.toString();
			var rij = "rij"+o.toString();
			document.getElementById(rij).style.visibility='visible';
			if(o != keuze){
				
				if (actok[o]=="NIETOK"){
					document.getElementById(chk).checked = 'false';
					document.getElementById(rij).style.visibility='hidden';
				}else{
					document.getElementById(rij).style.visibility='visible';
				}
			}
		}
	//}
}</script>
</head>
<body>
<table width="500" border="1" id="activiteiten">
<tr id="rij0"><td><input type="checkbox" name="act0" id="act0" onclick="javascript:checkTable('activiteiten', '0');"></td><td>0</td><td><span id="actvan-0">09:00:00</span></td><td><span id="acttot-0">10:00:00</span></td></tr>
<tr id="rij1"><td><input type="checkbox" name="act1" id="act1" onclick="javascript:checkTable('activiteiten', '1');"></td><td>1</td><td><span id="actvan-1">09:50:00</span></td><td><span id="acttot-0">11:00:00</span></td></tr>
<tr id="rij2"><td><input type="checkbox" name="act2" id="act2" onclick="javascript:checkTable('activiteiten', '2');"></td><td>2</td><td><span id="actvan-2">11:00:00</span></td><td><span id="acttot-0">11:30:00</span></td></tr>
<tr id="rij3"><td><input type="checkbox" name="act3" id="act3" onclick="javascript:checkTable('activiteiten', '3');"></td><td>3</td><td><span id="actvan-3">09:30:00</span></td><td><span id="acttot-0">10:30:00</span></td></tr>
</table>
</body>
</html>

Thx 4 your help!

Which times ? - the times in the checked row, the times in all the rows :shifty:

In any case, you just need to change the logic in your code to display/hide the rows your want when a check box is clicked.