Having a lot of trouble getting a datepicker to work

the page

p
hil
ip
duse
l.com/
bal.html

has a datepicker which i am unable to get to work. also if youre feeling extra helpful maybe you can tell me why the page selector at the bottom just sends me back to the index page. did i neglect to upload a script or what, something has the wrong name?

your help would be greatly appreciated

thanks
p:p

if this is a PHP problem we’ll need some code…

ok

I thought you might be able to see the code by viewing source on the page i provided.

Im going to put the datepicker which i culled from another site(mit license) and i feel like it might be related to the php, though the datepicker is a js file it references php. i know im being very confusing but here it is…im going to post this in java forum as well but your help would be greatly appreciated

my page is

www.phi
lipdu
sel.com/bal.html

/*

  • DatePicker
  • @author Rick Hopkins
  • @modified by Micah Nolte and Martin Va?ina
  • @version 0.3.2
  • @classDescription A date picker object. Created with the help of MooTools v1.11
  • MIT-style License.

– start it up by doing this in your domready:

$$(‘input.DatePicker’).each( function(el){
new DatePicker(el);
});

*/

var DatePicker = new Class({

/* set and create the date picker text box */
initialize: function(dp){

	// Options defaults
	this.dayChars = 1; // number of characters in day names abbreviation
	this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
	this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	this.format = 'mm/dd/yyyy';
	this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
	this.startDay = 7; // 1 = week starts on Monday, 7 = week starts on Sunday
	this.yearOrder = 'asc';
	this.yearRange = 20;
	this.yearStart = 1999; //(new Date().getFullYear());


	// Finds the entered date, or uses the current date
	if(dp.value != '') {
		dp.then = new Date(dp.value);
		dp.today = new Date();
	} else {
		dp.then = dp.today = new Date();
	}
	// Set beginning time and today, remember the original
	dp.oldYear = dp.year = dp.then.getFullYear();
	dp.oldMonth = dp.month = dp.then.getMonth();
	dp.oldDay = dp.then.getDate();
	dp.nowYear = dp.today.getFullYear();
	dp.nowMonth = dp.today.getMonth();
	dp.nowDay = dp.today.getDate();

	// Pull the rest of the options from the alt attr
	if(dp.alt) {
		options = Json.evaluate(dp.alt);
	} else {
		options = [];
	}
	dp.options = {
		monthNames: (options.monthNames && options.monthNames.length == 12 ? options.monthNames : this.monthNames) || this.monthNames, 
		daysInMonth: (options.daysInMonth && options.daysInMonth.length == 12 ? options.daysInMonth : this.daysInMonth) || this.daysInMonth, 
		dayNames: (options.dayNames && options.dayNames.length == 7 ? options.dayNames : this.dayNames) || this.dayNames,
		startDay : options.startDay || this.startDay,
		dayChars : options.dayChars || this.dayChars, 
		format: options.format || this.format,
		yearStart: options.yearStart || this.yearStart,
		yearRange: options.yearRange || this.yearRange,
		yearOrder: options.yearOrder || this.yearOrder
	};
	dp.setProperties({'id':dp.getProperty('name'), 'readonly':true});
	dp.container = false;
	dp.calendar = false;
	dp.interval = null;
	dp.active = false;
	dp.onclick = dp.onfocus = this.create.pass(dp, this);
},

/* create the calendar */
create: function(dp){
	if (dp.calendar) return false;

	// Hide select boxes while calendar is up
	if(window.ie6){
		$$('select').addClass('dp_hide');
	}
	
	/* create the outer container */
	dp.container = new Element('div', {'class':'dp_container'}).injectBefore(dp);
	
	/* create timers */
	dp.container.onmouseover = dp.onmouseover = function(){
		$clear(dp.interval);
	};
	dp.container.onmouseout = dp.onmouseout = function(){
		dp.interval = setInterval(function(){
			if (!dp.active) this.remove(dp);
		}.bind(this), 500);
	}.bind(this);
	
	/* create the calendar */
	dp.calendar = new Element('div', {'class':'dp_cal'}).injectInside(dp.container);
	
	/* create the date object */
	var date = new Date();
	
	/* create the date object */
	if (dp.month && dp.year) {
		date.setFullYear(dp.year, dp.month, 1);
	} else {
		dp.month = date.getMonth();
		dp.year = date.getFullYear();
		date.setDate(1);
	}
	dp.year % 4 == 0 ? dp.options.daysInMonth[1] = 29 : dp.options.daysInMonth[1] = 28;
	
	/* set the day to first of the month */
	var firstDay = (1-(7+date.getDay()-dp.options.startDay)%7);
	
	
	
	/* create the month select box */
	monthSel = new Element('select', {'id':dp.id + '_monthSelect'});
	for (var m = 0; m < dp.options.monthNames.length; m++){
		monthSel.options[m] = new Option(dp.options.monthNames[m], m);
		if (dp.month == m) monthSel.options[m].selected = true;
	}
	
	/* create the year select box */
	yearSel = new Element('select', {'id':dp.id + '_yearSelect'});
	i = 0;
	dp.options.yearStart ? dp.options.yearStart : dp.options.yearStart = date.getFullYear();
	if (dp.options.yearOrder == 'desc'){
		for (var y = dp.options.yearStart; y > (dp.options.yearStart - dp.options.yearRange - 1); y--){
			yearSel.options[i] = new Option(y, y);
			if (dp.year == y) yearSel.options[i].selected = true;
			i++;
		}
	} else {
		for (var y = dp.options.yearStart; y < (dp.options.yearStart + dp.options.yearRange + 1); y++){
			yearSel.options[i] = new Option(y, y);
			if (dp.year == y) yearSel.options[i].selected = true;
			i++;
		}
	}
	
	/* start creating calendar */
	calTable = new Element('table');
	calTableThead = new Element('thead');
	calSelRow = new Element('tr');
	calSelCell = new Element('th', {'colspan':'7'});
	monthSel.injectInside(calSelCell);
	yearSel.injectInside(calSelCell);
	calSelCell.injectInside(calSelRow);
	calSelRow.injectInside(calTableThead);
	calTableTbody = new Element('tbody');
	
	/* create day names */
	calDayNameRow = new Element('tr');
	for (var i = 0; i < dp.options.dayNames.length; i++) {
		calDayNameCell = new Element('th');
		calDayNameCell.appendText(dp.options.dayNames[(dp.options.startDay+i)%7].substr(0, dp.options.dayChars)); 
		calDayNameCell.injectInside(calDayNameRow);
	}
	calDayNameRow.injectInside(calTableTbody);
	
	/* create the day cells */
	while (firstDay <= dp.options.daysInMonth[dp.month]){
		calDayRow = new Element('tr');
		for (i = 0; i < 7; i++){
			if ((firstDay <= dp.options.daysInMonth[dp.month]) && (firstDay > 0)){
				calDayCell = new Element('td', {'class':dp.id + '_calDay', 'axis':dp.year + '|' + (parseInt(dp.month) + 1) + '|' + firstDay}).appendText(firstDay).injectInside(calDayRow);
			} else {
				calDayCell = new Element('td', {'class':'dp_empty'}).appendText(' ').injectInside(calDayRow);
			}
			// Show the previous day
			if ( (firstDay == dp.oldDay) && (dp.month == dp.oldMonth ) && (dp.year == dp.oldYear) ) {
				calDayCell.addClass('dp_selected');
			}
			// Show today
			if ( (firstDay == dp.nowDay) && (dp.month == dp.nowMonth ) && (dp.year == dp.nowYear) ) {
				calDayCell.addClass('dp_today');
			}
			firstDay++;
		}
		calDayRow.injectInside(calTableTbody);
	}
	
	/* table into the calendar div */
	calTableThead.injectInside(calTable);
	calTableTbody.injectInside(calTable);
	calTable.injectInside(dp.calendar);
	
	/* set the onmouseover events for all calendar days */
	$$('td.' + dp.id + '_calDay').each(function(el){
		el.onmouseover = function(){
			el.addClass('dp_roll');
		}.bind(this);
	}.bind(this));
	
	/* set the onmouseout events for all calendar days */
	$$('td.' + dp.id + '_calDay').each(function(el){
		el.onmouseout = function(){
			el.removeClass('dp_roll');
		}.bind(this);
	}.bind(this));
	
	/* set the onclick events for all calendar days */
	$$('td.' + dp.id + '_calDay').each(function(el){
		el.onclick = function(){
			ds = el.axis.split('|');
			dp.value = this.formatValue(dp, ds[0], ds[1], ds[2]);
			this.remove(dp);
		}.bind(this);
	}.bind(this));
	
	/* set the onchange event for the month & year select boxes */
	monthSel.onfocus = function(){ dp.active = true; };
	monthSel.onchange = function(){
		dp.month = monthSel.value;
		dp.year = yearSel.value;
		this.remove(dp);
		this.create(dp);
	}.bind(this);
	
	yearSel.onfocus = function(){ dp.active = true; };
	yearSel.onchange = function(){
		dp.month = monthSel.value;
		dp.year = yearSel.value;
		this.remove(dp);
		this.create(dp);
	}.bind(this);
},

/* Format the returning date value according to the selected formation */
formatValue: function(dp, year, month, day){
	/* setup the date string variable */
	var dateStr = '';
	
	/* check the length of day */
	if (day < 10) day = '0' + day;
	if (month < 10) month = '0' + month;
	
	/* check the format & replace parts // thanks O'Rey */
	dateStr = dp.options.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
	dp.month = dp.oldMonth = '' + (month - 1) + '';
	dp.year = dp.oldYear = year;
	dp.oldDay = day;
	
	/* return the date string value */
	return dateStr;
},

/* Remove the calendar from the page */
remove: function(dp){
	$clear(dp.interval);
	dp.active = false;
	if (window.opera) dp.container.empty();
	else if (dp.container) dp.container.remove();
	dp.calendar = false;
	dp.container = false;
	$$('select.dp_hide').removeClass('dp_hide');
}

});