Salesforce Certificate

Friday, 17 January 2014

Add years in salesforce standard & custom date field on Visualforce Page

In salesforce calender widget we can't able to select previous years from UI. but sometimes in business it's very important to select that.

Add below Javascript code in your visualforce page to add years in salesforce standard & custom date field

Javascript:

<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=1900;                   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>
 so your visualforce Page will be look like this.

Visualforce Page:
<apex:page standardController="Contact" id="mypage">
  <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=1900;                   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>

    <apex:form >  
        Date: <apex:inputField value="{!contact.birthdate}" id="demo" onfocus="DatePicker.pickDate(false, this , false);"/>  
    </apex:form>
</apex:page>


2 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete
  2. Information from this blog is very useful for me, am very happy to read this blog Kindly visit us @ Luxury Watch Box | Shoe Box Manufacturer |  Candle Packaging Boxes

    ReplyDelete