help editing a dhtml calendar

Hello! I am attempting to edit this dhtml calendar to my liking: http://www.dynarch.com/demos/jscalendar/

Basically, I want the time to show up as two combo boxes (a <select> item) rather than the way it is (see example #2 on that page).

Opening up the calendar.js file, I found the relevant code starting on line 846 and ending at 920. Here is the code I am referring to:

(function(){
			function makeTimePart(className, init, range_start, range_end) {
				var part = Calendar.createElement("span", cell);
				part.className = className;
				part.innerHTML = init;
				part.calendar = cal;
				part.ttip = Calendar._TT["TIME_PART"];
				part.navtype = 50;
				part._range = [];
				if (typeof range_start != "number")
					part._range = range_start;
				else {
					for (var i = range_start; i <= range_end; ++i) {
						var txt;
						if (i < 10 && range_end >= 10) txt = '0' + i;
						else txt = '' + i;
						part._range[part._range.length] = txt;
					}
				}
				Calendar._add_evs(part);
				return part;
			};
			var hrs = cal.date.getHours();
			var mins = cal.date.getMinutes();
			var t12 = !cal.time24;
			var pm = (hrs > 12);
			if (t12 && pm) hrs -= 12;
			var H = makeTimePart("hour", hrs, t12 ? 1 : 0, t12 ? 12 : 23);
			var span = Calendar.createElement("span", cell);
			span.innerHTML = ":";
			span.className = "colon";
			var M = makeTimePart("minute", mins, 0, 59);
			var AP = null;
			cell = Calendar.createElement("td", row);
			cell.className = "time";
			cell.colSpan = 2;
			if (t12)
				AP = makeTimePart("ampm", pm ? "pm" : "am", ["am", "pm"]);
			else
				cell.innerHTML = "&nbsp;";

			cal.onSetTime = function() {
				var pm, hrs = this.date.getHours(),
					mins = this.date.getMinutes();
				if (t12) {
					pm = (hrs >= 12);
					if (pm) hrs -= 12;
					if (hrs == 0) hrs = 12;
					AP.innerHTML = pm ? "pm" : "am";
				}
				H.innerHTML = (hrs < 10) ? ("0" + hrs) : hrs;
				M.innerHTML = (mins < 10) ? ("0" + mins) : mins;
			};

			cal.onUpdateTime = function() {
				var date = this.date;
				var h = parseInt(H.innerHTML, 10);
				if (t12) {
					if (/pm/i.test(AP.innerHTML) && h < 12)
						h += 12;
					else if (/am/i.test(AP.innerHTML) && h == 12)
						h = 0;
				}
				var d = date.getDate();
				var m = date.getMonth();
				var y = date.getFullYear();
				date.setHours(h);
				date.setMinutes(parseInt(M.innerHTML, 10));
				date.setFullYear(y);
				date.setMonth(m);
				date.setDate(d);
				this.dateClicked = false;
				this.callHandler();
			};
		})();

Code (markup):

I tried replacing that, with this:

(function(){
			function makeTimePartHours(className, init) {
				var part = Calendar.createElement("select", cell);
				part.name = className;
				part.id = className;
				part.className = className;
				part.calendar = cal;
				part.navtype = 50;
				if	(className == "hour") {
					var option = Calendar.createElement('option');
					option.value = 0;
					option.appendChild(Calendar.createTextNode('12 am'));
					part.appendChild(option);
					if (init == 0) {
						option.selected = true;
						}
				
					for (i=1; i<=11; i++) {
						option = Calendar.createElement('option');
						option.value = i;
						option.appendChild(Calendar.createTextNode(i+' am'));
						part.appendChild(option);
						if (init == i) {
							option.selected = true;
							}
						}
				
					option = Calendar.createElement('option');
					option.value = 12;
					option.appendChild(Calendar.createTextNode('12 pm'));
					part.appendChild(option);
					if (init == 12) {
						option.selected = true;
						}
				
					for (i=1; i<=11; i++) {
						option = Calendar.createElement('option');
						option.value = i+12;
						option.appendChild(Calendar.createTextNode(i+' pm'));
						part.appendChild(option);
						if (init == i+12) {
							option.selected = true;
							}
						}
				} else {
					var minStep = 5;
					var	minStr = "";
					for (i=0; i<60; i+=minStep) {
						if (i < 10) minStr = "0"+i;
						else minStr = String(i);
						var option = Calendar.createElement('option');
						option.value = i;
						option.appendChild(Calendar.createTextNode(minStr));
						part.appendChild(option);
						if ((init < (i+minStep))&&(init >= i)) option.selected = true;
						}
					}
				Calendar._add_evs(part);
				return part;
			};
			var hrs = cal.date.getHours();
			var mins = cal.date.getMinutes();
			//~ var t12 = !cal.time24;
			//~ var pm = (hrs > 12);
			//~ if (t12 && pm) hrs -= 12;
			var H = makeTimePart("hour", hrs);
			//~ var span = Calendar.createElement("span", cell);
			//~ span.innerHTML = ":";
			//~ span.className = "colon";
			var M = makeTimePart("minute", mins);

			cal.onSetTime = function() {
				var hrs = this.date.getHours(),
					mins = this.date.getMinutes();
				//~ H.innerHTML = (hrs < 10) ? ("0" + hrs) : hrs;
				//~ M.innerHTML = (mins < 10) ? ("0" + mins) : mins;
			};

			cal.onUpdateTime = function() {
				var date = this.date;
				//~ var h = parseInt(H.innerHTML, 10);
				//~ if (t12) {
					//~ if (/pm/i.test(AP.innerHTML) && h < 12)
						//~ h += 12;
					//~ else if (/am/i.test(AP.innerHTML) && h == 12)
						//~ h = 0;
				//~ }
				var d = date.getDate();
				var m = date.getMonth();
				var y = date.getFullYear();
				date.setHours(H.value);
				date.setMinutes(M.value);
				date.setFullYear(y);
				date.setMonth(m);
				date.setDate(d);
				this.dateClicked = false;
				this.callHandler();
			};
		})();

Code (markup):

But I keep getting an "unexpected object" on line 912, which is this comment line: //~ var span = Calendar.createElement("span", cell);

Doesn't make much sense. What do you guys think?

 

I'm having trouble editing the post, but anyway, I found a few of my mistakes, but now I'm getting "option.text is not a function"... here's the updated code:

(function(){
			function makeTimePart(className, init) {
				var part = Calendar.createElement("select", cell);
				part.name = className;
				part.id = className;
				part.className = className;
				part.calendar = cal;
				part.navtype = 50;
				if	(className == "hour") {
					var option = Calendar.createElement('option', part);
					option.value = 0;
					option.text('12 am');
					if (init == 0) option.selected = true;
				
					for (i=1; i<=11; i++) {
						option = Calendar.createElement('option');
						option.value = i;
						option.text(i+' am');
						part.appendChild(option);
						if (init == i) option.selected = true;
					}
				
					option = Calendar.createElement('option');
					option.value = 12;
					option.text('12 pm');
					part.appendChild(option);
					if (init == 12) option.selected = true;
				
					for (i=1; i<=11; i++) {
						option = Calendar.createElement('option');
						option.value = i+12;
						option.text(i+' pm');
						part.appendChild(option);
						if (init == i+12) option.selected = true;
					}
					
				} else {
					var minStep = 5;
					var	minStr = "";
					for (i=0; i<60; i+=minStep) {
						if (i < 10) minStr = "0"+i;
						else minStr = String(i);
						option = Calendar.createElement('option');
						option.value = i;
						option.text(minStr);
						part.appendChild(option);
						if ((init < (i+minStep))&&(init >= i)) option.selected = true;
					}
				}
				Calendar._add_evs(part);
				return part;
			};
			var hrs = cal.date.getHours();
			var mins = cal.date.getMinutes();
			//~ var t12 = !cal.time24;
			//~ var pm = (hrs > 12);
			//~ if (t12 && pm) hrs -= 12;
			var H = makeTimePart("hour", hrs);
			//~ var span = Calendar.createElement("span", cell);
			//~ span.innerHTML = ":";
			//~ span.className = "colon";
			var M = makeTimePart("minute", mins);

			cal.onSetTime = function() {
				var hrs = this.date.getHours(),
					mins = this.date.getMinutes();
				//~ H.innerHTML = (hrs < 10) ? ("0" + hrs) : hrs;
				//~ M.innerHTML = (mins < 10) ? ("0" + mins) : mins;
			};

			cal.onUpdateTime = function() {
				var date = this.date;
				//~ var h = parseInt(H.innerHTML, 10);
				//~ if (t12) {
					//~ if (/pm/i.test(AP.innerHTML) && h < 12)
						//~ h += 12;
					//~ else if (/am/i.test(AP.innerHTML) && h == 12)
						//~ h = 0;
				//~ }
				var d = date.getDate();
				var m = date.getMonth();
				var y = date.getFullYear();
				date.setHours(H.value);
				date.setMinutes(M.value);
				date.setFullYear(y);
				date.setMonth(m);
				date.setDate(d);
				this.dateClicked = false;
				this.callHandler();
			};
		})();

Code (markup):