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.

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.

 

Posted

in

,

by


Related Posts

Comments

7 responses to “Change year range in Datepicker – Salesforce”

  1. KC Avatar
    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.

    1. JitendraZaa Avatar
      JitendraZaa

      Can you provide, which JS error you are getting ?

      1. KC Avatar
        KC

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

        1. JitendraZaa Avatar
          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.

  2. Albin Avatar
    Albin

    Hi Jitendra,

    It was a nice post. But didnt worked out for me. Now in Summer 15, HTML components have been removed and this is not working. Can u suggest any alternative method.

    Tried using VF Homepage component but didnt worked out.

    Regards,
    Albin

    1. Jitendra Zaa Avatar
  3. Nagarjuna Avatar
    Nagarjuna

    How to change year range in Datepicker – Salesforce 18

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading