Date Selection Lookup in a Salesforce sControl
Back in the day salesforce.com used a popup window to allow for date selections on their edit screens. Their new functionality by which the date is selected from inside the page itself is much more slick and I wanted to take a few minutes to show you how this works.
The first part of this sControl are the usual include files. These include the style sheets and JavaScript files from salesforce.com:
<!-- common styles --><link href="/sCSS/10.0/Theme2/common.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<!-- standard styles --><link href="/sCSS/10.0/Theme2/dStandard.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<!-- element styles --><link href="/sCSS/10.0/Theme2/elements.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<!-- salesforce.com specific functions --><script src="/js/functions.js" type="text/javascript"></script>
<!-- further salesforce.com specific functions --><script src="/dJS/library.js" type="text/javascript"></script>
<!-- few more salesforce.com specific functions --><script src="/dJS/en/1192057840000/library.js" type="text/javascript"></script>-->One important thing to note about including the library.js file is that it can change from time-to-time and if, by chance, the date utiliity scripts within that file are altered then the sample I have written here could break. That is the reason I have a second line commented out with reference to another library.js file (/dJS/en/1192057840000/library.js). If the date lookup breaks at some point you can simply uncomment that line and comment out the "/dJS/library.js" line.
Now let's get into the code that formats and displays the actual calendar section of the page. Here it is:
<!-- code for date picker scripts -->
<div class="datePicker" id="datePicker">
<div class="dateBar">
<img src="/s.gif" alt="Previous Month" class="calLeft" onblur="this.className = 'calLeft';" onclick="DatePicker.datePicker.prevMonth();" onfocus="this.className = 'calLeftOn';" onmouseout="this.className = 'calLeft';" onmouseover="this.className = 'calLeftOn';" title="Previous Month">
<select id="calMonthPicker" name="calMonthPicker" title="Month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<img src="/s.gif" alt="Next Month" class="calRight" onblur="this.className = 'calRight';" onclick="DatePicker.datePicker.nextMonth();" onfocus="this.className = 'calRightOn';" onmouseout="this.className = 'calRight';" onmouseover="this.className = 'calRightOn';" title="Next Month">
<select id="calYearPicker" name="calYearPicker" title="Year">
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
</div>
<div class="calBody">
<table class="calDays" border="0" cellpadding="0" cellspacing="0" id="datePickerCalendar">
<tr><th class="dayOfWeek" scope="col">Sun</th><th class="dayOfWeek" scope="col">Mon</th><th class="dayOfWeek" scope="col">Tue</th><th class="dayOfWeek" scope="col">Wed</th><th class="dayOfWeek" scope="col">Thu</th><th class="dayOfWeek" scope="col">Fri</th><th class="dayOfWeek" scope="col">Sat</th></tr>
<tr id="calRow1"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow2"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow3"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow4"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow5"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow6"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
</table>
<div class="buttonBar"><a href="javascript:DatePicker.datePicker.selectDate('today');" class="calToday">Today</a></div>
</div>
</div>I always include that code snippet under all the other HTML in my sControl but above the closing BODY tag. It just keeps it out of the way while I work the other sections of my code.
Next we'll look at the field layout for the date.
<span class="dateInput"><input id="sampleDate" name="sampleDate" onfocus="DatePicker.pickDate(true, 'sampleDate', false);" size="12" type="text"><span class="dateFormat">[ <a href="javascript:DatePicker.insertDate('{!TODAY()}', 'sampleDate', true);">{!TODAY()}</a> ]</span></span>Notice that the merge value for the date is passed to the code. This allows the date selection to remain dynamic and keeps the current date listed on the screen (next to your date field) for your user.
The other thing to note about this code is that the field name/id is passed to the pickDate function. In our example we are using "sampleDate" as the value but it can be anything you want as long as you don't use spaces.
The final piece of code for this example is the script that tells the page what date formatting to expect in the date field and the current date/time. See the code below
window.sfdcPage = new TaskEditPage();
UserContext.initialize({
'locale':'en_US','today':'{!NOW()}','dateTimeFormat':'M/d/yyyy h:mm a','ampm':['AM','PM'],'dateFormat':'M/d/yyyy','startOfWeek':'1','isAccessibleMode':false,'language':'en_US'
});Like I mentioned earlier, the code from above is primarily for formatting purposes and the one piece I really want to point out is the merge field {!NOW()}, this is the section of the script that keeps the date lookup dynamic and tells the script the current date/time for the user accessing the page.
Here's the full code formatted for you to use right away:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Date Lookup</title>
<!--
Created by: Greg Hacic
Last Update: October 24, 2007 by Greg Hacic
Questions?: greg@interactiveties.com
Copyright: (c)2007 Interactive Ties LLC
-->
<!-- common styles --><link href="/sCSS/10.0/Theme2/common.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<!-- standard styles --><link href="/sCSS/10.0/Theme2/dStandard.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<!-- element styles --><link href="/sCSS/10.0/Theme2/elements.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet">
<!-- salesforce.com specific functions --><script src="/js/functions.js" type="text/javascript"></script>
<!-- further salesforce.com specific functions --><script src="/dJS/library.js" type="text/javascript"></script>
<!-- few more salesforce.com specific functions --><script src="/dJS/en/1192057840000/library.js" type="text/javascript"></script>-->
<script language="JavaScript" type="text/javascript">
<!--
//initializes all calendar variables for use in date selection logic
window.sfdcPage = new TaskEditPage();
UserContext.initialize({
'locale':'en_US','today':'{!NOW()}','dateTimeFormat':'M/d/yyyy h:mm a','ampm':['AM','PM'],'dateFormat':'M/d/yyyy','startOfWeek':'1','isAccessibleMode':false,'language':'en_US'
});
//-->
</script>
</head>
<body class="taskTab editPage">
<form method="post">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<div class="bPageTitle">
<div class="ptBody secondaryPalette"><div class="content"><img src="/s.gif" alt="Home" class="pageTitleIcon"><h1 class="pageType">Example<span class="titleSeparatingColon">:</span></h1><h2 class="pageDescription" id="pageDesc"> Date Lookup</h2><div class="blank"> </div></div><div class="links"> </div></div>
</div>
<div>
<div class="bPageBlock secondaryPalette"><div class="pbHeader"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title=""><h2 class="mainTitle">Details</h2></td><td class="pbButton" id="buttonsTop"> </td></tr></table></div>
<div class="pbBody">
<div class="pbSubheader first tertiaryPalette"><span class="pbSubExtra"><span class="requiredLegend"><span class="requiredExampleOuter"><span class="requiredExample"> </span></span><span class="requiredText"> = Required Information</span></span></span><h3>Information<span class="titleSeparatingColon">:</span></h3></div>
<div class="pbSubsection">
<table class="detailList" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="labelCol requiredInput"><label for="sampleDate"><span class="requiredMark">*</span>Date</label></td>
<td class="data2Col" colspan="3"><div class="requiredInput"><div class="requiredBlock"></div><span class="dateInput"><input id="sampleDate" name="sampleDate" onfocus="DatePicker.pickDate(true, 'sampleDate', false);" size="12" type="text"> <span class="dateFormat">[ <a href="javascript:DatePicker.insertDate('{!TODAY()}', 'sampleDate', true);">{!TODAY()}</a> ]</span></span></div></td>
</tr>
<tr>
<td class="labelCol empty last"> </td>
<td class="dataCol col02 empty last"> </td>
<td class="labelCol empty last"> </td>
<td class="dataCol empty last"> </td>
</tr>
</table>
</div>
</div>
<div class="pbBottomButtons"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="pbTitle"><img src="/s.gif" alt="" width="1" height="1" class="minWidth" title=""> </td><td class="pbButtonb" id="buttonsBottom"> </td></tr></table></div>
<div class="pbFooter secondaryPalette"><div class="bg"></div></div>
</div>
</div>
</td>
</tr>
</table>
</form>
<!-- code for date picker scripts -->
<div class="datePicker" id="datePicker">
<div class="dateBar">
<img src="/s.gif" alt="Previous Month" class="calLeft" onblur="this.className = 'calLeft';" onclick="DatePicker.datePicker.prevMonth();" onfocus="this.className = 'calLeftOn';" onmouseout="this.className = 'calLeft';" onmouseover="this.className = 'calLeftOn';" title="Previous Month">
<select id="calMonthPicker" name="calMonthPicker" title="Month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<img src="/s.gif" alt="Next Month" class="calRight" onblur="this.className = 'calRight';" onclick="DatePicker.datePicker.nextMonth();" onfocus="this.className = 'calRightOn';" onmouseout="this.className = 'calRight';" onmouseover="this.className = 'calRightOn';" title="Next Month">
<select id="calYearPicker" name="calYearPicker" title="Year">
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
</div>
<div class="calBody">
<table class="calDays" border="0" cellpadding="0" cellspacing="0" id="datePickerCalendar">
<tr><th class="dayOfWeek" scope="col">Sun</th><th class="dayOfWeek" scope="col">Mon</th><th class="dayOfWeek" scope="col">Tue</th><th class="dayOfWeek" scope="col">Wed</th><th class="dayOfWeek" scope="col">Thu</th><th class="dayOfWeek" scope="col">Fri</th><th class="dayOfWeek" scope="col">Sat</th></tr>
<tr id="calRow1"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow2"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow3"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow4"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow5"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
<tr id="calRow6"><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td><td onblur="hiOff(this);" onclick="DatePicker.datePicker.selectDate(this);" onfocus="hiOn(this);" onmouseout="hiOff(this);" onmouseover="hiOn(this);"> </td></tr>
</table>
<div class="buttonBar"><a href="javascript:DatePicker.datePicker.selectDate('today');" class="calToday">Today</a></div>
</div>
</div>
</body>
</html>Want to see this working right now? See it here.
I'm sure you can work this into your sControls so feel free to make a copy of this code for yourself
Author
I've been working with Salesforce since 2003. Over the years I've held various roles for diverse salesforce.com customers, created a Salesforce specific ISV, founded a few start-ups and built numerous applications for the AppExchange. All of these experiences have allowed me to learn quite a bit about building on the platform.