Populating a historic Year Range on the Salesforce CRM calendar pop-up

Salesforce.com provides many useful field types from formulas and roll-up summaries to the simple URL field.  One field that can be a little frustrating for users is the date field due to the way it only allows a limited selection of year values to be chosen from the picklist.

Restricted Calendar

When clicking on a date field the user is automatically presented with a pop-up calendar and when selecting the Year picklist they can only ever select from a range of seven years.  The seven year range is based on the current year.

The minimum year selectable is the year prior to the current year and the maximum value of year that can be selected is the current year plus six years.  Obviously, this is not much usef when trying to enter historic dates, such as birth dates.

Here we are going to improve the user experience and enable historic years to be selected from the picklist with the following steps:

1. Navigate to the home page components setup page, by clicking the following: Your Name | Setup | Customize | Home | Home Page Components.
2. Click New
The New button is found by scrolling down the page to the Custom Components section.
3. Click Next (if shown)
The Next button is found on the Understanding Custom Components page (if this is shown)
4. Enter the name of the Custom Component in the Name field.  In this recipe,  type the text Calendar Year Historic.
5. Select the HTML Area option from the Type options list.
6. Click Next.
7. Ensure the option Narrow (Left) Column is selected within the Component Position option list.
8. Check the Show HTML check box
Important: The above step is important – Locate the Show HTML checkbox as shown in the following image

show HTML

9. Paste the following code :

<br>
<script type="text/javascript">
function insert(pobjSelect, psText, psValue){
 var lobjOption = document.createElement("Option"); lobjOption.text = psText;  lobjOption.value = psValue;  pobjSelect.options.add(lobjOption);
}
var winLoaded = window.onload;
window.onload = function(){   if(winLoaded){
  winLoaded();
 }
 var e = document.getElementById("calYearPicker");
 if(e != null){
  for(i = e.length - 1; i>=0; i--){
   e.remove(i);
  }
  var d = new Date();    var startYear = d.getFullYear() + 6;
  for(var i = 1920; i<startYear; i++){    insert(e, i, i);   }  }
}
</script>

10. Click Save
We now need to add the custom home page component to a home page layout

Extended Calendar

11. Navigate to the home page components setup page, by clicking the following: Your Name | Setup | Customize | Home | Home Page Layouts.
12. Determine which home page layout to place the component and click Edit.
13. Check the Calendar Year Historic check box in the Select Narrow Components to Show section
14. Click Next
15. Position the Calendar Year Historic as the lowest position in the Narrow (Left) Column using the Arrange the component on your home page.
16. Click Save