This could be used as an independent page (embedded), or as a part of the form (page). In the second case drop <html>, <head> and <body> tags, insert script part of the code into the JS Header and the rest of the code into the form by marking as Pass-Thru HTML text.
<html>
<head>
<title>Fast Date Picker</title>
<style>
button {
border-left: 1px solid buttonhighlight;
border-right: 1px solid buttonshadow;
border-top: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
font:menu;
color:#000080;
text-align: center;}
a {color:#0000FF;
cursor:hand;
text-decoration:underline;
}
</style>
<script language="JavaScript1.2">
function doAction(el){
el.style.borderStyle = "inset";
}
</script>
<script>
var elStart = 0;
var elEnd = 0;
function doFlexSelection(el)
{var Year = document.forms[0].year.value;
if(el.style.borderStyle=='inset')
{el.style.borderStyle='outset';
el.style.backgroundColor='buttonface';
}
else
{el.style.borderStyle='inset';
}
for(i=1; i<13; i++)
{if(eval("document.forms[0].sb"+i).style.borderStyle=='inset')
{elStart = i;
break;
}
}
for(i=1; i<13; i++)
{if(eval("document.forms[0].sb"+i).style.borderStyle=='inset')
{elEnd = i;
}
}
//alert(eval(elStart));
//alert(eval(elEnd));
Requires Free Membership to View
Register today to access targeted resources from our editorial writers and independent industry experts focused on Lotus Domino, Notes, Workplace and other related technologies.
elStart = eval(elStart);
elEnd = eval(elEnd);
if(elStart == elEnd && eval("document.forms[0].sb"+elStart).style.borderStyle == "outset")
{doFlexSelectionReset(el);
el.blur();
return;
}
for(i=elStart; i<=elEnd; i++)
{
eval("document.forms[0].sb"+i).style.borderStyle ='inset';
eval("document.forms[0].sb"+i).style.backgroundColor='#ffffff';
}
el.blur();
elStart = (elStart < 10 ? "0" + elStart : elStart);
elEnd = (elEnd < 10 ? "0" + elEnd : elEnd);
document.forms[0].StartDate.value=Year + "-"+ elStart +"-01";
if(elEnd == "01" || elEnd == "03" || elEnd == "05" || elEnd == "07" || elEnd == "08" || elEnd == "10" || elEnd == "12")
document.forms[0].EndDate.value= Year + "-"+ elEnd +"-31";
else if(elEnd == "02")
document.forms[0].EndDate.value= Year + "-"+ elEnd +"-28";
else
document.forms[0].EndDate.value= Year + "-"+ elEnd +"-30";
}
function doFlexSelectionReset(el)
{
el.style.borderStyle ='outset';
for(i=1; i<22; i++)
{eval("document.forms[0].sb"+i).style.borderStyle ='outset';
eval("document.forms[0].sb"+i).style.backgroundColor='buttonface';
}
document.forms[0].StartDate.value = '';
document.forms[0].EndDate.value = '';
el.blur();
}
</script>
</head>
<body>
<form>
<fieldset style="width:360; background:buttonface"><legend><b><font face="Arial" size="2">Fast
Selection Date Picker</font></b></legend>
<font face="Arial" size="2">Start Date:</font> <input type="text" name="StartDate" size="10" readonly style="color: #FF0000;> <font size="2" face="Arial">End Date:
<input type="text" name="EndDate" size="10" readonly style="color: #FF0000;">
<br>
<hr align="left">
<div align="center">
<center>
<table style="margine-left: 10px; color: #000080" border="0" width="129" height="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4"><button id="sb1" style="height:20px; width:25px; font:menu" onClick="doFlexSelection(this);">Jan</button>
<button id="sb2" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Feb</button>
<button id="sb3" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Mar</button>
<button id="sb4" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Apr</button>
<button id="sb5" style="height:20px; width:25px;" onClick="doFlexSelection(this);">May</button>
<button id="sb6" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Jun</button>
<button id="sb7" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Jul</button>
<button id="sb8" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Aug</button>
<button id="sb9" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Sep</button>
<button id="sb10" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Oct</button>
<button id="sb11" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Nov</button>
<button id="sb12" style="height:20px; width:25px;" onClick="doFlexSelection(this);">Dec</button></td>
<td>
<select size="1" name="year" style="font: menu; padding: 0" onChange="doFlexSelectionReset(); StartDate.value=''; EndDate.value=''">
<option value="2002">2002</option>
<option value="2001" selected>2001</option>
<option value="2000">2000</option>
</select>
</td>
</tr>
<tr>
<td colspan="4">
<button id="sb13" style="height:20px; width:73px;" onClick="doFlexSelectionReset(this); sb1.click(); sb3.click();">1 Quart</button>
<button id="sb14" style="height:20px; width:4px;" onClick="doFlexSelectionReset(this); sb1.click(); sb6.click();"></button>
<button id="sb15" style="height:20px; width:71px;" onClick="doFlexSelectionReset(this); sb4.click(); sb6.click();">2 Quart</button>
<button id="sb16" style="height:20px; width:4px;" onClick="doFlexSelectionReset(this); sb4.click(); sb9.click();"></button>
<button id="sb17" style="height:20px; width:71px;" onClick="doFlexSelectionReset(this); sb7.click(); sb9.click();">3 Quart</button>
<button id="sb18" style="height:20px; width:4px;" onClick="doFlexSelectionReset(this); sb7.click(); sb12.click();"></button>
<button id="sb19" style="height:20px; width:73px;" onClick="doFlexSelectionReset(this); sb10.click(); sb12.click();">4 Quart</button>
</td>
<td rowspan="2"><button id="sb20" title="Date Reset" style="height:40px; width:50px;" onClick="doFlexSelectionReset(this);">Reset</button></td>
</tr>
<tr>
<td colspan="4">
<button id="sb21" style="height:20px; width:300px;" onClick="doFlexSelectionReset(this); sb1.click(); sb12.click();">Year</button>
</td>
</tr>
</table>
</center>
</div>
</fieldset>
</form>
</body>
</html>
This was first published in October 2001