+ Start a Discussion
BBajajBBajaj 

How to show previous years in date field on VF page?

I have one VF page on which i have shown one date field using input field ie "User's Date OF Birth" .

Problem is calendar widget is showing years 2011 onwards but i need it to be showing previous years say 1950 onwards.

sfcksfck

Strangely enough, it is not possible. The visualforce datepicker only goes so far back and that cannot be changed.

 

Here is a suggestion of how to work around it - I've had a quick read and it looks OK but I have not tried it myself. 

 

http://codebycody.com/2011/05/13/fix-for-salesforce-com-date-picker-year-limitation/

craigmhcraigmh

Home Page Components no longer allow JavaScript. It seems like SFDC is dead-set on ruining the lives of developers.

sfcksfck

The link I mentioned was wrong, sorry. Since it's a VF page you are asking about, you can put a Javascript widget into it directly. It is a bit of work getting Javascript to work with VF but there are tips and tricks online

CodySechelskiSGCodySechelskiSG

Hi there,

 

I am the author of the article that sfdk posted. BTW, thanks sfdk.

 

For a visualforce page you can just paste in the following code inside the apex:page tags. Just reember to modify the startYear and endYear variables

 

<!--Import the Google hosted jQuery LIbrary-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--this is where the magic happens-->
<script type="text/javascript">
	//You need to wrap everything in document.ready because the select tag we are taregting needs to
	//be loaded in the DOM befire we can access it.
	$(document).ready(function() {
		//-----EDIT THE NEXT TWO LINES-----
		var startYear=1982; //replace 1982 with whatever year you want to start with;
		var endYear=2034; //replace 2034 with whatever year you want to end with;
		//-----EDIT BELLOW HERE AT YOUR OWN RISK-----
		var optionsString='';
		//Make sure that the endYear comes after the startYear
		if(startYear<endYear){
			//Loops through each date and renders the string for an option tag and addes it to the Optrionsstring variable
			for(i=startYear;i<endYear+1;i++){
				optionsString += "<option value=\""+i+"\">"+i+"</option>";
			}
			//Replace the innerHTML of the calendar picker year select tag with the Optionsstring we constructed.
			$('#calYearPicker').html(optionsString);
		}
	});
</script>

 

CodySechelskiSGCodySechelskiSG

I just tested JavaScript in a home page component in Spring12 and it seems to still work. One thing I have noticed is that it does not like JavaScript comments for some reason. This is the code I tested with:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">alert('Hi, ' + $('#userNavLabel').text())</script>