Custom “Range of Years” for “Standard Date Field” in Salesforce

Have you ever noticed that the standard date field shows year Range to only up to 7 years? What if we want that Range to be custom as per our functionality.

For that you need to use the following script:

<script type="text/javascript">
    $(document).ready (
        function() {
            var startYear = 2000;
            var endYear = 2050;
            var optionsString = '';
            if(startYear<endYear) {
                for(i=startYear;i<endYear+1;i++) {
                    optionsString += "<option value=""+i+"">"+i+"</option>";
                }
                $('#calYearPicker').html(optionsString);
            }
            $('#sidebarDiv #hideMyParent').parent().parent().hide();
        }
    );
</script>

**** In var startYear=2000; var endYear=2050; mention your year Range.

Visualforce Page:

<apex:page standardController="Contract" extensions="ContractClass" showHeader="true" sidebar="true">
    <apex:sectionHeader title="Contract Edit" subtitle="New Contract"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
    </apex:includeScript> 
    <span id="hideMyParent"></span>
    <script type="text/javascript">
        $(document).ready(function() {
            var startYear = 2000;
            var endYear = 2050; 
            var optionsString = '';
            if(startYear<endYear) {
                for(i=startYear;i<endYear+1;i++) {
                    optionsString += "<option value=""+i+"">"+i+"</option>";
                }
                $('#calYearPicker').html(optionsString);
            }
            $('#sidebarDiv #hideMyParent').parent().parent().hide();
        });
    </script> 
    <apex:form> 
        <apex:pageBlock title="Contract Edit">
            <apex:pageBlockSection title="Contract Information">
                <apex:outputField value="{!Contract.Ownerid}" html-disabled="true"/>
                <apex:inputField value="{!Contract.StartDate}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons>
                <apex:commandButton action="{!save}" value="Save"/>
                <apex:commandButton action="{!saveAndNew}" value="Save &amp; New" />
                <apex:commandButton action="{!cancel}" value="Cancel"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Cheers!!!