Fix for Salesforce.com Date Picker Year Limitation

By default the Salesforce date picker only shows a handful of values in the Year drop down field. For most applications this is just fine. But take, for example, a date of birth field. Users might not realize that you can edit the year manually in the text field and when presented with a drop down list that only shows the last 4 or 5 years, might get confused and click away. JavaScript to the rescue!

advertisement

  This solution is out of date!

Salesforce.com no longer supports adding JavaScript in sidebar components. At this time there does not seem to be an alternative method.

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.
    5-13-2011-10-52-30-AM
  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”.
    5-13-2011-10-54-07-AM
  3. On the next page, be sure and select “Narrow” as the position option. Click the “Show HTML” checkbox.
    5-13-2011-10-55-11-AM
  4. Replace the “<br>” with the following code. You can modify the “startYear” and “endYear” variables to fit your needs.
  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:

Download the code.

  This solution is out of date!

Salesforce.com no longer supports adding JavaScript in sidebar components. At this time there does not seem to be an alternative method.

advertisement

Leave a Reply

Legacy Comments - Closed

  1. Rajesh says:

    Great!! It worked 🙂

  2. Kiran Kumar says:

    I followed above 5 steps.But am not getting the calendar check in home page and in any date fields of other objects are still displaying current years only.So,Please explain the step by step any one……….

  3. Nitin says:

    Hi Cody,
    I wanted to get rid of Private Check box on the notes & attachments section, As this list is not customizable i know that it can be hidden on the UI using javascript by entering the DOM of the page.
    For this I created a home page component – html area – narrow left and added the following js code:

    window.onload = new function()
    {
    window.setTimeout(hidePrvChkbx,2000);
    }
    function hidePrvChkbx()
    {
    if(document.getElementsById(“IsPrivate”)!=null)
    document.getElementById(‘IsPrivate’).style.display=’none’;
    }

    And added this to the home page layout, But still this doesnt seem to be working for me.
    Please help me out regarding this.

    Am new to js scripting and I need corrections in my code or approach

    Thanks in advance

    Nitin

  4. vijay says:

    Nice!! good solution..
    @Cody Sechelski: similarly it is possible to display the alert/warning message to the user from standard vfpages before leaving page with unsaved changes?? plz help me out how can we achieve this..
    Thanks in adavance….

    Vijay

  5. Elly says:

    Has anyone tried this in Chrome? It works great for me in Firefox but not in Chrome.

  6. Sam says:

    Hi Cody,

    Thanks for this script. It works perfectly with all date pickers in my org. The problem is that it seems to clash with apex TabPanels and so it was causing one of my other components to fail.

    See this thread for more info: http://boards.developerforce.com/t5/Visualforce-Development/tabPanel-broken-in-full-sandboxes-in-Spring-10-release-multiple/td-p/177750

    This conflict can be fixed by setting up jquery in no conflict mode as outlined on this page – http://www.tehnrd.com/setting-up-jquery-with-salesforce-com/

    Just thought this info might be helpful to others.

    Thanks again for the code!

    Sam.

  7. Sweet! Glad it was helpful!

  8. M.Araya says:

    Just wanted to add that I added the code, clicked all the appropriate boxes, and it worked beautifully.
    Got the drop box to show up on my custom fields in Accounts.

    Thanks!

  9. B Wilson says:

    Hi there,

    I'd love to be able to put this in, but when I added it to the HTML field, I got an error message saying it went over the character limit (32,000). Any suggestions? The only thing I changed was the start year. I'm doing this in the sandbox so I'm not sure if this is the issue. Thanks!

  10. Meenakshmi Goswami says:

    Hi Cody,
    I have followed your instructions. I can only see the sidebar in every page layout, but year list in calenders have not been changed. Can you please suggest what i am missing.

  11. The calYearPicker id should be on any page that would have a calendar popup. The Case edit page for example. Whereas the view page would not have a dom element with that ID and the jQuery selector would return zero elements and move on.

    Are you getting a JavaScript error, or is it just not working for you?

  12. Hmm…Are you pasting in the code from the first code block on this page? The one without the comment? For some reason the hrml editor for home page components does not like JavaScript comment and tends to freak out.

    When you say that you "only get script in the calendar box", you mean that you are actually seeing the code in the home page component?

    Also, what browser are you using and what edition of SFDC do you have?

  13. Chris P says:

    I've followed the above directions, and I only get script in the calendar box, I've read the replies, and removed the http; still no calendar…what I notice is when I copy and paste the code in and save, when I go back to view it or look at it, it inserts other characters. Any help would be great. thanks

  14. James says:

    Pasted the code into the home page component. The jquery hide method works fine and hides the component. However, the id selector cannot find "calYearPicker". Is there a trick to get the javascript to find the calYearPicker Id or am I missing something?

  15. Thanks Andrew! Yeah that's a great enhancement idea.

  16. Andrew says:

    To make this dynamic so that it won't need updating in the future to expand the maximum date and control what date that maximum is better the following alteration will work: where x is whatever value you want to set the # of years out for the ranges

    var cDate = new Date();
    var cYear = cDate.getFullYear();
    var startYear=cYear – x;
    var endYear=cYear + x;

  17. Peter Bixby says:

    This is a really great solution. Thanks.

    I do have one problem though!
    I've added the script as a custom component in Home Page Components
    I've added it to my 2 Home Page Layouts in Select Narrow Components to Show

    The date picker on all my pages works great but my colleagues still only see current years.

    Are you able to give me any pointers please?

    Thanks.

    Peter

  18. Sorry. Missed out on the last comment. Got it now. Thanks 🙂

  19. Hello,
    Nice solution but it seems to take effect only in the Home Layout, i.e. I can find my source embedded only in the home page. How do I make it work for the Leads page? I examined the html but didn't find this code block embedded anywhere. What am I missing?

    Thanks,
    m^e

  20. Kyle Skrinak says:

    Thanks to Rajit, that suggestion enabled me to see the component. Thanks!

    I tried installing a jquery library as a static resource in SFDC, but it's not trivial.
    However, I was able to stop the IE insecure warnings by changing:

    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;
    to
    src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

    I read that removing the protocol stops the security warning. Another IE peculiarity, no doubt.

    Now, all works as expected on all our computers. Thanks again!

  21. Rajit Nair says:

    @Cody Sechelski – Great work.Thanks for sharing 🙂

    @Kyle Skrinak – To make this script component globally available in all pages, you need go to User Interface Settings and select the option "Show Custom Sidebar Components on All Pages".

  22. Interesting. I have not seen those sorts of errors. If it's complaining about a secure https site pulling in content from a non-secure http site, I would try downloading the latest version of jqury, and upload it as a static resource in SFDC. Then you can replace the src attribute in the script tag to the url for the static resource. for example: <script type="text/javascript" src="https://cs2.salesforce.com/resource/1315444059000/jquery163min"></script&gt;. I just tried it with jquery 1.6.3 and it works as expected.

    Also, be sure you are using the code from the first code block in the post. The one without any comments. For some reason, comments will break the JavaScript in this particular editor.

  23. Kyle Skrinak says:

    I did not make any modifications to your posted code, added as instructed.

    IE9 complains that the jquery call is an insecure call, since it's calling code from another domain than the page's domain. Chrome makes a similar warning, but only warns.
    IE9 says "$" is undefined, even if I "allow for insecure content"
    I get the same result from Firefox and Chrome. While all browsers successfully download the juqery.min.js script, "$" remains undefined. Uncle.

  24. Once, the JS is in the home page component, it should be available for globally on every page. Not sure why startyear would be undefined. Did you make any modifications to the script? If so can you post the modified script in a reply and I can try and help you troubleshoot it.

  25. Kyle Skrinak says:

    Well, this looks fantastic. However, I'm having issues with implementation. I am able to add a javascript inline script to the home page layout; and the script appears on the rendered page. However, the "startYear" js variable is undefined, at least for the console for that page. Additionally, I need this to appear on the "New Contact" layout (appropriately enough) but I'm misfiring on finding how to add it to that specific page.

    Thanks!

  26. Terry Lue says:

    Any way to make it so the modified date picker only shows up on certain fields? I have three date fields on a custom Object and I need the birthdate__c field to have an extended year list, but the other ones, I want to use the normal date picker. Any thoughts?

  27. Cedric says:

    Thanks so much for sharing! What a creative solution 🙂 My users are very happy I was able to give them a wider range of date to pick. This has been on a list of "Salesforce Limitation" issues for a long time.

    Thanks again,
    Cedric

  28. Sarah Millo says:

    Brilliant!

  29. MIles says:

    Awesome! It works great! THanks

Please use the Google+ Comment section above. Thanks!