<script>
function createComboxImg(pid,clickHandler){
if( document.all(pid).children(0) ){
return;
}
var btn = document.createElement("BUTTON");
btn.appendChild(document.createTextNode(6));
btn.className = "combo-button";
btn.onfocus = function () { this.blur(); };
btn.onclick = clickHandler;
document.all(pid).appendChild(btn);
return btn;
}
function init(){
var dateList = new Array("cutOffDate","sailingDate");
for(var i=0;i<dateList.length;i++) {
createComboxImg(dateList[i]+"Div",new Function("getCalendar(\""+dateList[i]+"\")"));
}
createNumberClicker("num","up","down");
}
function getCalendar(textId){
var obj = document.all(textId);
popUpCalendar(obj, obj, "yyyy-mm-dd");
}
function popUpCalendar(a,b,c){
alert("Here to pop up the calendar.");
}
function createNumberClicker(source,uper,downer){
var text = document.all(source);
var btnUp = document.createElement("BUTTON");
btnUp.appendChild(document.createTextNode(5));
btnUp.className = "combo-button-up";
btnUp.onfocus = function(){ this.blur(); };
btnUp.onclick = function(){ if(text.value)text.value++;};
document.all(uper).appendChild(btnUp);
var btnDown = document.createElement("BUTTON");
btnDown.appendChild(document.createTextNode(6));
btnDown.className = "combo-button-down";
btnDown.onfocus = function(){ this.blur(); };
btnDown.onclick = function(){ if(text.value)text.value--;};
document.all(downer).appendChild(btnDown);
}
</script>
<style>
.combo-button {
cursor: pointer;
height: 22px;
border: 1px solid #A5ACB2;
border-left-width: 0px;
padding: 0;
background: buttonface;
width: 14px;
vertical-align: baseline;
font-size: 8pt;
font-family: Webdings, Marlett;
}
.combo-button-up {
cursor: pointer;
height: 11px;
border: 1px solid #A5ACB2;
border-left-width: 0px;
padding: 0;
background: buttonface;
width: 14px;
vertical-align: baseline;
font-size: 5pt;
font-family: Webdings, Marlett;
}
.combo-button-down {
cursor: pointer;
height: 11px;
border: 1px solid #A5ACB2;
border-left-width: 0px;
border-top-width: 0px;
padding: 0;
background: buttonface;
width: 14px;
vertical-align: baseline;
font-size: 5pt;
font-family: Webdings, Marlett;
}
.combo-text {
height: 22px;
border: 1px solid #A5ACB2;
}
</style>
<body onload="init();">
<div><input name="cutOffDate" id="cutOffDate" style="width:76px " class="combo-text"><span id="cutOffDateDiv" style="width:14px "></span></div>
<div><input name="sailingDate" id="sailingDate" style="width:76px " class="combo-text"><span id="sailingDateDiv" style="width:14px "></span></div>
<div><table border="0" cellpadding="0" cellspacing="0" ><tr><td><input name="num" id="num" style="width:76px " class="combo-text" value="10"></td><td><table border="0" cellpadding="0" cellspacing="0"><tr><td><span id="up" style="width:14px" valign="top"></span></td></tr><tr><td><span id="down" style="width:14px"></span></td></tr></table></td></tr></table></div>
</body>