Fix for Salesforce.com Date Picker Year Limitation

The Problem

So here is a real annoyance with Salesforce.com that I'm sure many of you have seen. When clicking in a date or date/time field, you get this nice little date picker. I have no problem with a date picker, and theirs works pretty good in many cases, but lets say you want to add a date field to an object for a birth date, or something that is far in the past. Look at the picklist for the year in the date picker. You only get a half dozen of so options and most of them are in the future.

Now, you could just select any date, then go into the text field and change it, but some users just don't understand that they can do that.

 

 

The Solution

Truth be told, this is not so much a fix as it is a hack, but it's a good stop-gap solution until Salesforce.com comes up with a solution. It involves injecting some jQuery into a home page component to modify the year picklist in the date picker.

1. Go to Setup >Customize > Home > Home Page Components.
   
2. Add a new Custom Component. You can name it whatever you like. I called mine "calendar hack". Be sure and select the type "HTML area".
   
3. On the next page, be sure and select "Narrow" as the position option. Click the "Show HTML" checkbox.
   
4. Replace the "<br>" with the following code. You can modify the "startYear" and "endYear" variables to fit your needs.

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <span id="hideMyParent"></span> <script type="text/javascript"> $(document).ready(function() { var startYear=1982; var endYear=2034; var optionsString=''; if(startYear<endYear){ for(i=startYear;i<endYear+1;i++){ optionsString += "<option value=\""+i+"\">"+i+"</option>"; } $('#calYearPicker').html(optionsString); } $('#sidebarDiv #hideMyParent').parent().parent().hide(); });</script>
   

5. Now, just save the custom component and add it to all of the Home Page Layouts. Every date picker on every page that uses the sidebar, should now have the new years.

Read More

So what this code actually does is loop through the years between the "startYear" variable and the "endYear" variable and add those years to the date picker year dropdown. Then, it uses a little more jQuery to hide the component, so users will never see it.

You coders may notice that I did not comment my code very well. That's because Salesforce.com just does not like comments inside script tags within the custom HTML area components. Here is the commented version, for those who want to understand it better:

<!--NOTE!!! This version of the code is commented so you can see what's going on.
    For some reason, comments will break the javascript when pasted into the SFDC
    Home Page Component Editor. Be sure and remove all comments before saving the
    Home Page Component.
-->
<!--Import the Google hosted jQuery LIbrary-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--We need something with a known id so we can navigate up in the dom to hide the sidebar component.-->
<!--Anything with an id will do. I used a span tag-->
<span id="hideMyParent"></span>
<!--this is where the magic happens-->
<script type="text/javascript">
	//You need to wrap everything in document.ready because the select tag we are taregting needs to
	//be loaded in the DOM befire we can access it.
	$(document).ready(function() {
		//-----EDIT THE NEXT TWO LINES-----
		var startYear=1982; //replace 1982 with whatever year you want to start with;
		var endYear=2034; //replace 2034 with whatever year you want to end with;
		//-----EDIT BELLOW HERE AT YOUR OWN RISK-----
		var optionsString='';
		//Make sure that the endYear comes after the startYear
		if(startYear<endYear){
			//Loops through each date and renders the string for an option tag and addes it to the Optrionsstring variable
			for(i=startYear;i<endYear+1;i++){
				optionsString += "<option value=\""+i+"\">"+i+"</option>";
			}
			//Replace the innerHTML of the calendar picker year select tag with the Optionsstring we constructed.
			$('#calYearPicker').html(optionsString);
		}
		//Hide the home page componet;
		$('#sidebarDiv #hideMyParent').parent().parent().hide();
	});
</script>

Download the code.

• Code with comments
• Code minified