Hi Java script Gurus.

I've been trying to figure out how to run the date_time picker java script but seems like it doesen't like me :-)

date and time picker should run when you select MATH and click Date taken text box

here is my problematic work:

Code:
<html>
<head>
<link rel="stylesheet" href="images/main.css">
<script type="text/javascript" src="images/prototype-1.js"></script>
<script type="text/javascript" src="images/prototype-base-extensions.js"></script>
<script type="text/javascript" src="images/prototype-date-extensions.js"></script>
<script type="text/javascript" src="images/behaviour.js"></script>
<script type="text/javascript" src="images/datepicker.js"></script>
<link rel="stylesheet" href="images/datepicker.css">
<script type="text/javascript" src="images/behaviors.js"></script>
<title>OHAB SCHOOL</title>
<script type='text/javascript'>

function toggle(tbl_show,total_tbl)
     {
         for (i=1;i<total_tbl+1;i++)
         {
        document.getElementById("thetbl"+i).style.display='none';
        }
         if (tbl_show!="") {     
             obj=document.getElementById("thetbl"+tbl_show);
             obj.style.display='';
             }
     }

function updatehosts(selectedchostgroup){
hostslist.options.length=0
if (selectedhostsgroup>0){
for (i=0; i<hosts[selectedhostsgroup].length; i++)
hostslist.options[hostslist.options.length]=new Option(hosts[selectedhostgroup][i].split("|")[0], hosts[selectedhostgroup][i].split("|")[1])
}
}
><!-- check Button -->
function enable_bld_button(buttonSel){    
   document.getElementById(buttonSel).disabled = false;
}
function getAllSelections(box) {
	var options = box.options;
	var selectedOptions = [];
	for (var i = 0; i < options.length; i++)
		if (options[i].selected)
			selectedOptions.push(options[i].value);
	return selectedOptions;
}
function BuildAlert(buildID) {
alert("Selected for " + getAllSelections(document.getElementById(buildID)));
      }


 <!-- ADDED -->
var ohabo = [];
ohabo["startList"] = ["addition","subtraction"];
ohabo["addition"] = ["whole","integer","fraction"];
ohabo["whole"] = ["whole Stuff 1","whole Stuff 2","whole Stuff 3"];
ohabo["integer"] = ["integer Stuff 1","integer Stuff 2","integer Stuff 3"];
ohabo["even"] = ["even Stuff 1","even Stuff 2","even Stuff 3"];

var nLists = 3; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['pogi']['List'+i].length = 1;
document.forms['pogi']['List'+i].selectedIndex = 0;
}
var nCat = ohabo[currCat];
for (each in nCat) {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]); 
nOption.setAttribute('value',nCat[each]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

function init() {
fillSelect('startList',document.forms['pogi']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

></script>
</head>
<body >
<form name="pogi">
<table border="1">
  <tr>
    <td >
      <p>Select Subject</p>
    </td>
    <td>
     <select name="select_task" onchange="toggle(this.value,2)"> 
  <option value="">---SELECT ONE---</option>
  <option value="1">1 - Science</option>
  <option value="2">2 - Math</option>
  <option value="3">3 - Politics</option>
  <option value="4">4 - Pehm</option>
  <option value="5">6 - Others</option>
  </select>
    </td>
</tr>
</table>
</br>
<table border="1" id="thetbl1" >
<tr>
   <td  ><p>Select a Subject</p></td>
  <td ><select size="3" name="build_list" multiple="yes" id="build_lst" onfocus="enable_bld_button('button1')"> 
  <option>Phisics</option>
  <option>Chemistry</option>
  <option>Anatomy</option>
  <option>Botany</option>
  <option>Geology</option>
  
  </select></td>
   </td>   
</tr>
   <tr>
   <td ><p>Exceute</p></td>
   <td ><input id="button1" type='button' name="bld_button" disabled value='COMMIT' onclick="BuildAlert('build_lst')")></td>
   <!--onclick="get_build(getBUILDSelections this.form['build_list'].value)"-->
   </tr>
   </table>     
<table border="1" id="thetbl2" >
</tr>
<tr>
   <td><p>Select a Subject</p></td>
   <td><p>Select a Topic</p></td>
   <td><p>Select Topic2</p></td>   
</tr>
<tr>
  <tr>
<td>
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Choose a Subject</option>
</select>

<td>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Choose a Topic </option>
</select>
</td>
  <td>
<select id="build_2nd" name='List3' size="2"  multiple="yes" onchange="getValue(this.value, this.form['List2'].value, 
this.form['List1'].value)" onfocus="enable_bld_button('button2')">
<option selected >Choose Topic2</option>
</select>
</td>
  </tr>
  <tr>
   <td ><p>Date Taken</p></td>
   <td  ><input size='5' type="text" name="SelectedDate" id="SelectedDate" class="datetimepicker"/>
   </td>
   </tr>
   <tr>
   <td ><p>Exceute</p></td>
   <td  ><input id="button2" type='button' name="bld_button2" disabled value='COMMIT' onclick="BuildAlert('build_2nd')")></td>
   </tr>
</table>
</form>
</body>
</html>
here is a sample of working date_time picker that I want to apply in my work:

Code:
<html> 
  <head>
    <title>My Web Page!</title>
	<link rel="stylesheet" href="images/main.css">
					<script type="text/javascript" language="javascript" src="images/prototype-1.js"></script>
			<script type="text/javascript" language="javascript" src="images/prototype-base-extensions.js"></script>
			<script type="text/javascript" language="javascript" src="images/prototype-date-extensions.js"></script>
			<script type="text/javascript" language="javascript" src="images/behaviour.js"></script>
							<script type="text/javascript" language="javascript" src="images/datepicker.js"></script>
										<link rel="stylesheet" href="images/datepicker.css">
							<script type="text/javascript" language="javascript" src="images/behaviors.js"></script>
  </head>
  <body>
     <!--<input size='5' type="text">-->
	 
	 <div style="float:left; width:400px;">Date and time, horizontal layout, 24-hour time:</div> <input class="datetimepicker"/>
	
	</form>
  </body>
</html>

you may also download the datetimepicker.js here:
site_1
site_2