Change year range in Datepicker – Salesforce

In Datepicker control of salesforce, most of the developers must have faced issue on year range for Datepicker control. We cannot configure the year range in standard date picker control. However, for a long time i am using a JQuery code to change the range of years in Datepicker and thought to share with you. You can find similar solution at many places but thought to add in my articles library also.

So, lets start to resolve this problem. The only thing we will need is Javascript based Home page Component.
Navigate to “Set up | App SetUp | Customize | Home | Home Page Components”.
click on “New” Custom Component. In Next screen you will prompted with the type of Homepage component.

Select “HTML Area”.
In Next screen, click on checkbox “Show HTML” as shown in below image.

Now write below Javascript code in HTML area :

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<span id="hideThisHomePageComp"></span>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {
                var startYear=1985;
                var endYear=2024;
                var htmlStr='';
                if(startYear<endYear){
                                for(i=startYear;i<endYear+1;i++){
                                                htmlStr += "<option value=""+i+"">"+i+"</option>";
                                }
                                $j('#calYearPicker').html(htmlStr);
                }
                $j('#sidebarDiv #hideThisHomePageComp').parent().parent().hide();
                }
);
</script>

Note:

• While importing JQuery from Google or any other CDN, don’t write “http” protocol. It will automatically detect the protocol.
• Don’t write any single line comment, as Salesforce will internally convert above Javascript code into single line. And if you write any single line comment then everything after that will be commented. Multiple line comment will work.
• If you are using Datepicker in custom Visualforce page and if sidebar is not enabled then above work around will not work.
• We are hiding the home page component itself by line “parent().parent().hide()”, as there is no need to show this component to end user.

Update – 23-Jul-2015

Above solution will not work after Summer 15 as HTML area is changed not to allow javascript, However you can check this SFSE thread for still workable workaround to inject above Javacsript.