Home > Domino Tips > Administrator > Web > Date range picker for Web-based applications
Domino Tips:
EMAIL THIS
 TIPS & NEWSLETTERS TOPICS 

WEB

Date range picker for Web-based applications


Yakov Minkin
10.01.2001
Rating: --- (out of 5)


Digg This!    StumbleUpon Toolbar StumbleUpon    Bookmark with Delicious Del.icio.us   


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.



Code

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

Rate this Tip
To rate tips, you must be a member of SearchDomino.com.
Register now to start rating these tips. Log in if you are already a member.




Digg This!    StumbleUpon Toolbar StumbleUpon    Bookmark with Delicious Del.icio.us   



RELATED CONTENT
Web
Display SharePoint data in a Lotus Notes Web application with Ajax
Top 10 Lotus Notes/Domino administration tips of 2008
How to create a dynamic SVG graph using a Lotus Notes agent
Hosting multiple Lotus Domino servers at one IP address without a VPN
Upgrading and patching Firefox: Security considerations for administrators
Admin2005 Learning Guides
Making old, new flavors of Domino SSO work
A fun site, with serious code
Creating corporate welcome pages with Lotus Notes
Domino Web traffic analyzers

RELATED RESOURCES
2020software.com, trial software downloads for accounting software, ERP software, CRM software and business software systems
Search Bitpipe.com for the latest white papers and business webcasts
Whatis.com, the online computer dictionary

DISCLAIMER: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.



Domino & Lotus Notes Security Solutions: Authentication, Antispam, Encryption and Antivirus
HomeTopicsITKnowledge ExchangeTipsAsk the ExpertsMultimediaWhite PapersDomino IT Downloads
About Us  |  Contact Us  |  For Advertisers  |  For Business Partners  |  Site Index  |  RSS
SEARCH 
TechTarget provides technology professionals with the information they need to perform their jobs - from developing strategy, to making cost-effective purchase decisions and managing their organizations' technology projects - with its network of technology-specific websites, events and online magazines.

TechTarget Corporate Web Site  |  Media Kits  |  Site Map




All Rights Reserved, Copyright 1999 - 2009, TechTarget | Read our Privacy Policy 		  TechTarget - The IT Media ROI Experts