Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

I have used date field in my visualforce page.By default the datpicker is showing values upto year 2012.but i nedd to insert few more years before 2012.How can i implement this as it is the default calendar provided by salesforce.

share|improve this question
    
This code is not working in Internet explorer 8. Please let me know what changes need to be done to make it work in IE8. Thanks a lot. --JP –  user2801 May 7 '13 at 13:41
    
Hey @Jayaprakash, I appreciate you need more rep points to comment. This relates to an IE bug going back seven years. I've updated my answer with an IE8-compatible approach. –  user320 May 7 '13 at 14:15
add comment

3 Answers 3

It's a lot of tweaking to get this injected into standard pages... worst case, just type the year in :P reinventing vs decorating the native picker is an interesting debate, all of us with unique circumstances!

  1. Setup > Customize > User Interface

  2. Check [X] Show Custom Sidebar Components on All Pages

  3. Create a new Home Page Component (HTML, narrow) called "Date Picker Years" containing:

    <script>
      (function() {
        var windowOnload = window.onload;
        window.onload = function() {
          if (windowOnload) windowOnload();
          var select = document.getElementById('calYearPicker');
          if (!select) return;
    
          select.innerHTML = '';
          var startYear = new Date().getFullYear() - 90;
          for (var year = startYear; year < startYear + 100; year++) {
            select.options[select.options.length] = new Option(year, year);
          }
        }
      }());
    </script>
    
  4. Place that Component on your Home Page Layout.

    extra years in datepicker

Edit - was asked for some explanation:

  • the wrapper (function() { ... }()); prevents vars polluting the global scope
  • don't just trample the window.onload function, store it and call it (interceptor pattern)
  • calYearPicker could disappear any time; if so, "get out of dodge quick" by returning early
share|improve this answer
2  
Nice work Derp! –  Phil Hawthorn Feb 1 '13 at 17:23
    
hi...follow this techsahre.blogspot.in/2011/04/…. –  Pankaj Feb 2 '13 at 12:17
2  
good spot pankaj; if already within Visualforce context, a component on the page is way better –  user320 Feb 2 '13 at 14:12
    
I have a page with multiple date fields, and I only want to do this on some of them (ie. birthdays can be in past, to do items can only be in the future). Any tips on implementing something like that? –  Benj Mar 6 '13 at 15:41
1  
@user320 RE: "Don't trample the window.onload" mention, you could alternatively leverage the Salesforce provided function sfdcPage.appendToOnloadQueue to push your script into the array of functions SFDC naturally calls in the page lifecycle. sfdcPage.appendToOnloadQueue(function() { /* Your script here */ }); –  Mark Pond May 7 '13 at 16:37
add comment

Here's one Workaround i found out in one of the blog.

Note: This will not work if your the "sidebar" attribute in your page is set to "false".

share|improve this answer
add comment

Since you're in Visualforce, you may want to use a custom Datepicker - that way you have more control in how it looks and works.

Bob Buzzard has a blog post related to exactly this issue, of wanting to show different year values: Integrate custom date picker with Visualforce.

Personally, though, I'd go with the jQuery UI Datepicker - it has a configuration option that lets you display year menus, with 10 years displayed before and after the current year . To implement in Visualforce, simply render your Date field with an <apex:inputText value="{!record.My_Date_Field__c}" id="myDateField"/>, and then use jQuery to apply the Datepicker widget to the generated input field:

<apex:page standardController="Opportunity" extensions="CloseDateController">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  <apex:stylesheet value="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css"/>

  <apex:form >
  <apex:pageBlock title="Set Close Date">
    <apex:pageBlockSection>
        <apex:pageBlockSectionItem>
            <apex:outputLabel value="Close Date"/>
            <apex:inputText value="{!closeDate}" id="myDateField"/>
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
    <apex:pageBlockButtons>
        <apex:commandButton action="{!saveDate}" value="Save" rerender="closeDateOutput"/>
    </apex:pageBlockButtons>
  </apex:pageBlock>
  </apex:form>

  <apex:outputField value="{!Opportunity.CloseDate}" rendered="true" id="closeDateOutput"/>

    <script>
      jQuery(function(){
        var $j = jQuery.noConflict();
        $j("input[id$=myDateField]").datepicker({
           changeYear: true,
           changeMonth: true,
           dateFormat: "mm/dd/yy"
        });
      });

   </script>

</apex:page>

public class CloseDateController {

  private Opportunity opp;
  private String closeDate;

  public String getCloseDate() {
   return closeDate;
  }

   public void setCloseDate(String value) { 
     closeDate = value;
     // We expect a date in MM/DD/YYYY format,
     // with the Month, coming from JavaScript, being one less than it should 
     List<String> parts = value.split('/');
     opp.CloseDate = Date.newInstance(
       Integer.valueOf(parts[2]),
       Integer.valueOf(parts[0])+1,
       Integer.valueOf(parts[1])
     );
   }

   public CloseDateController(ApexPages.StandardController ctl) {
      Opportunity o = (Opportunity) ctl.getRecord();
      Date d = o.CloseDate;
      closeDate = d.month() + '/' + d.day() + '/' + d.year();
   }

   public PageReference saveDate() {
     upsert opp;
     return ApexPages.currentPage();
   }

 }
share|improve this answer
    
If this works, it's probably the most elegant solution I've seen for this scenario. –  James Loghry Feb 1 '13 at 14:20
    
techsahre.blogspot.in/2011/04/… will surely works –  Pankaj Feb 2 '13 at 12:19
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.