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.

Year Range in Salesforce Date Picker

Year Range in Salesforce Date Picker

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.

Homepage Component Type in Salesforce

Homepage Component Type in Salesforce

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

Javascript code in Home Page component - Salesforce

Javascript code in Home Page component – Salesforce

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.
  • KC

    Hi Jitendra,
    Thanks for the useful script. I have tab format in my page and this script is not allowing to switch between tabs. How can I switch to other tabs with this code still working fine.
    thanks in advance.

    • JitendraZaa

      Can you provide, which JS error you are getting ?

      • KC

        NO error with JS, but I am unable to switch between tabs. Without the above code, able to switch between tabs

        • JitendraZaa

          There must be some Javascript error. Please use Google Chrome, press “Ctrl+Shift+J” and try to switch tab. And attache screenshot here, so that we can see.