JScript - 24hrs with leading zero.

Hello:

I found this great calendar program that has 1 main fault. It does not display 24hrs with the leading zero. I think the below code is the root of the problem. Can anyone help me here please as I know no JScript:


//Time Picker

function tPicker(timeFieldId) {
var timeField = $(timeFieldId);
var hhmm;

//compute tpicker coordinates (beneath timeField)
var x = timeField.offsetLeft + timeField.offsetWidth + 22;
var y = timeField.offsetTop - 95;

//deal with elements inside tables and such
var parent = timeField;
while (parent.offsetParent) {
parent = parent.offsetParent;
x += parent.offsetLeft;
y += parent.offsetTop ;
}

//If not present, create tpDiv, move it to x,y and toggle visibility
var tpDiv = createDiv("tpDiv", x, y);

//draw the timepicker table; the timeField object will receive the time
var html='<div class="tpFrame">';
var apm = /\s*a/i.exec(tFormat);
if (apm != null) {
var am = String(apm).replace("a","am").replace("A","AM");
var pm = String(apm).replace("a","pm").replace("A","PM");
}
if (apm != null) { html += '- AM -'; }
for (var i=7;i<24;i++){
if (i==7) { html += '<div class="tpAM">'; }
if (i==12 && (apm != null)) { html += '- PM -'; }
if (i==12) { html += '<div class="tpPM">'; }
if (i==18) { html += '<div class="tpEM">'; }
for (var j=0;j<60;j += 15) {
if (apm != null) {
hh = i;
ampm = (hh < 12) ? am : pm;
if (hh >= 13) { hh -= 12; }
hhmm1 = String(hh) + ":" + String("0" + j).slice(-2) + ampm;
hhmm2 = String("0" + hh).slice(-2) + ":" + String("0" + j).slice(-2);
} else {
hhmm1 = hhmm2 = String("0" + i).slice(-2) + ":" + String("0" + j).slice(-2)
}
html += '<a class="tpPick" href="#" onclick="updateTimeField(\''+timeFieldId+'\', \''+hhmm1+'\');">'+hhmm2+'</a>';
if (j<45) { html += '&nbsp;&nbsp;'; }
}
html += (i==11 || i==17 || i==23) ? '</div>' : '<br>';
}
html += '</div>';
tpDiv.innerHTML = html;
}

function updateTimeField(timeFieldId, timeString) {
var timeField = $(timeFieldId);
if (timeString) { timeField.value = timeString; }
var tpDiv = $("tpDiv");
tpDiv.style.visibility = "hidden";
tpDiv.style.display = "none";
timeField.focus();
}

 

The code is actually there, but only for one of the time strings. Try this (add the red parts):

                if (hh >= 13) { hh -= 12; }
                hhmm1 = String([COLOR=#ff0000]"0" + [/COLOR]hh)[COLOR=#ff0000].slice(-2)[/COLOR] + ":" + String("0" + j).slice(-2) + ampm;
                hhmm2 = String("0" + hh).slice(-2) + ":" + String("0" + j).slice(-2);
            } else {
                hhmm1 = hhmm2 = String("0" + i).slice(-2) + ":" + String("0" + j).slice(-2)
            }
            html += '<a class="tpPick" href="#" onclick="updateTimeField(\''+timeFieldId+'\', \''+hhmm1+'\');">'+hhmm2+'</a>';

Code (markup):

 

This seems like a LOT of ice-skating uphill brute force code to do... Well, I can't even figure out what the devil it's trying to do other than horrible slow use of innerHTML where the DOM should be manipulated, the style property being used where classes should be so customizing appearance is easier, and messing around with separate variables for what should be a Date object leveraging it's properties instead of screwing around with trying to slice a string.

Though it is very hard for me to write a proper version without seeing what it's being fed for values or the HTML it's manipulating... I can say the needlessly convoluted code and html construction really needs to be chopped down a good deal. It would also probably help if it leveraged onmouseover instead of that tpicker nonsense...

The lack of anything remotely resembling sane formatting of the code isn't helping either.

Just what is this trainwreck of convoluted code and outdated practices even trying to accomplish?