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.


<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)); 

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

Dig deeper on Lotus Notes Domino Administration Tools

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchWinIT

Search400

  • iSeries tutorials

    Search400.com'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 ...

SearchEnterpriseLinux

SearchVirtualDataCentre.co.UK

Close