Manage Learn to apply best practices and optimize your operations.

Date range picker for Web-based applications

This could be used as an independent page (embedded), or as a part of the form (page).

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.


<title>Fast Date Picker</title>
button {
		 border-left: 1px solid buttonhighlight;
		 border-right: 1px solid buttonshadow;
		 border-top: 1px solid buttonhighlight;
		 border-bottom: 1px solid buttonshadow;
 		 text-align: center;}
a      {color:#0000FF;
<script language="JavaScript1.2">

function doAction(el){ = "inset";

var elStart = 0;
var elEnd = 0;
function doFlexSelection(el)
{var Year = document.forms[0].year.value;

 for(i=1; i<13; i++)
        {elStart = i;

 for(i=1; i<13; i++)
        {elEnd = i;


elStart = eval(elStart); 
elEnd = eval(elEnd);

if(elStart == elEnd && eval("document.forms[0].sb"+elStart).style.borderStyle == "outset")

for(i=elStart; i<=elEnd; i++)
   	 eval("document.forms[0].sb"+i).style.borderStyle ='inset';
 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";
   document.forms[0].EndDate.value= Year + "-"+ elEnd +"-30";

function doFlexSelectionReset(el)
{ ='outset';

 for(i=1; i<22; i++)
    {eval("document.forms[0].sb"+i).style.borderStyle ='outset';
 document.forms[0].StartDate.value = ''; 
 document.forms[0].EndDate.value = '';



<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;">
<hr align="left">
  <div align="center">
<table style="margine-left: 10px; color: #000080" border="0" width="129" height="1" cellspacing="0" cellpadding="0"> 
    <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>
    <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>
    <td colspan="4">
      <button id="sb13" style="height:20px; width:73px;" onClick="doFlexSelectionReset(this);;;">1 Quart</button>
      <button id="sb14" style="height:20px; width:4px;" onClick="doFlexSelectionReset(this);;;"></button>
      <button id="sb15" style="height:20px; width:71px;" onClick="doFlexSelectionReset(this);;;">2 Quart</button>
      <button id="sb16" style="height:20px; width:4px;" onClick="doFlexSelectionReset(this);;;"></button>
      <button id="sb17" style="height:20px; width:71px;" onClick="doFlexSelectionReset(this);;;">3 Quart</button>
      <button id="sb18" style="height:20px; width:4px;" onClick="doFlexSelectionReset(this);;;"></button>
      <button id="sb19" style="height:20px; width:73px;" onClick="doFlexSelectionReset(this);;;">4 Quart</button>
    <td rowspan="2"><button id="sb20" title="Date Reset" style="height:40px; width:50px;" onClick="doFlexSelectionReset(this);">Reset</button></td>
    <td colspan="4">
    <button id="sb21" style="height:20px; width:300px;" onClick="doFlexSelectionReset(this);;;">Year</button>

This was last published in October 2001

Dig Deeper on Lotus Notes Domino Administration Tools

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.




  • iSeries tutorials's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...