Standard Datepicker Year values

Question

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.

Answer 1

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.

   

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

Answer 2

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".

Answer 3

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();
   }

 }