function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Chris987654321Chris987654321 

Date of Birth field - Calendar years don't go back before this year

I am trying to create a Date of Birth field. Whether you are using a VF page or a regular page layout, when you use the calendar in Salesforce, it only lets you pick from years going forward. So the calendar is useless for something like a Date of Birth since obviously the year is before this year. Obviously the user can type the date, but is there any other way to adjust how the calendar behaves.
SteveBowerSteveBower

You can see the Javascript for the DatePicker functionality if you look for it in here:

https://na6.salesforce.com/dJS/en/1237502932000/library.js

 

Unless I'm missing something, I don't think you can change the behavior to give you what you want, sad though that clearly is.

 

A good idea for Salesforce would be use the default value, if present, as the starting point for building the select list instead of today's month/year.  Then at least you could have defaulted the date to something reasonable like 1/1/1940 for birthday selections.

 

Of course, you can roll your ownif you use VF and don't use their default inputfield, but that might be more than is worth doing.

 

Best, Steve.

GuyClairboisGuyClairbois

Hey guys,

I had the same problem. Here's what I came up with (with help of Harm Korten's blog post here: http://salesforce.harmkorten.nl/2010/salesforce-country-fields-as-picklists/. It can be used to enter any series of years you want, either static or variable (based on e.g. current year). Below example will show the last 100 years.

 

 

1) Go to Setup -> App Setup -> Customize -> User Interface. Here make sure the 'Show Custom Sidebar Components on All Pages' is checked.
2) Go to Setup -> App Setup -> Home Page Layouts. Make sure all your Home Page Layouts have the Messages & Alerts component checked.
3) Go to Setup -> App Setup -> Home Page Components. Here, click edit for Messages & Alerts. In the textarea, copy and paste the javascript code below and save (it can just go below your normal Messages & Alerts, won't show up on the actual page).

 

 

 

<script src="/js/dojo/0.4.1/dojo.js"></script>
<script src="/soap/ajax/11.1/connection.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dojo.collections.Store");
dojo.require("dojo.charting.Chart");
dojo.require('dojo.json');
var arYears = getYears();
function swapYears(){
	// Contact Birth day
	if(document.getElementById('calYearPicker') != null) {
		var select = document.getElementById('calYearPicker');
		var curValue = select.value; 
		var parentx = select.parentNode;
		parentx.removeChild(select);
		select = document.createElement('select');
		select.size = 1;
		select.id = 'calYearPicker';
		select.name = 'calYearPicker';
		parentx.appendChild(select);
	}
	if(select != null) {
		for(x=0;x<100;x++) {		
			select.options[x] = new Option(arYears[x], arYears[x], false, false);
		}
	}
}
function getYears() {
	sforce.sessionId = getCookie('sid');
	sforce.connection.sessionId=sforce.sessionId;
	var out = [];
	// generate dates for the last 100 years
	var currentTime = new Date()
	var year = currentTime.getFullYear()
	try {
		for(x=0;x<100;x++) {
			out[x] = x+year-99;
		}	
				
	} catch(error) {
		alert(error);		
	}	
	return out;
}
dojo.addOnLoad(swapYears);
</script>

 

 

Not the most elegant, but quite light-weight and no impact on any other configuration.

Best,

Guy

VBHCVBHC

Great Fix.. Thanks Much GuyClairbois...Appreciated !!!

Amator_VitaeAmator_Vitae
That is cool!! I'm not quite sure how changing the "Messages & Alerts" settings gets it to work, but I like it! Thanks Guy!
Amator_VitaeAmator_Vitae

I noticed this trick doesn't work if either sidebar="false" or showHeaders="false" in a VF page.  However, if you add the same code to your VF page, it'll work as desired! 

Also, the years in the picklist will only go up to the current year.  To have the picklist go to, say, 4 years in the future, adjust the code to :

 

-------------------------------------------------------------------------------------------------

function getYears() {

            sforce.sessionId = getCookie('sid');

            sforce.connection.sessionId=sforce.sessionId;

            var out = [];

            // generate dates for the last 100 years

            var currentTime = new Date()

            var year = currentTime.getFullYear()

            try {

                        for(x=0;x<100;x++) {

                                    out[x] = x+year-95;

                        }         

                                               

            } catch(error) {

                        alert(error);                  

            }         

            return out;

}

dojo.addOnLoad(swapYears);

-------------------------------------------------------------------------------------------------

deepu.sandeepdeepu.sandeep

If i need future yearsprevious years both what i need to do?

 

GuyClairboisGuyClairbois

To get -100 years to +100 years, change this line:

 

for(x=0;x<100;x++) {

 

to something like this:

for(x=-100;x<100;x++) {

 

 



 

deepu.sandeepdeepu.sandeep

Hi GuyClairbois,

 

Thanks for ur reply.

I tried its not working..

 

If i kept code like below

 

for(x=0;x<100;x++) {
            out[x] = x+year+1;
                      
        }

 

I'm getting up to + 100 years, but i need both +100 and -100 years what i need to do.

 

 

 

GuyClairboisGuyClairbois

my bad.. you need to do a change in 2 places.

 

The bottom loop is for generating the number

But there'se also a loop for putting the numbers in the picklist.

Also I forgot that my example was for 100 past year instead of future years.

 

So what we have to do is expanding the number-generating to 100 more entries AND adding 100 more entries to the picklist.

 

So the code would be like this:

<script src="/js/dojo/0.4.1/dojo.js"></script>
<script src="/soap/ajax/11.1/connection.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dojo.collections.Store");
dojo.require("dojo.charting.Chart");
dojo.require('dojo.json');
var arYears = getYears();
function swapYears(){
	// Contact Birth day
	if(document.getElementById('calYearPicker') != null) {
		var select = document.getElementById('calYearPicker');
		var curValue = select.value; 
		var parentx = select.parentNode;
		parentx.removeChild(select);
		select = document.createElement('select');
		select.size = 1;
		select.id = 'calYearPicker';
		select.name = 'calYearPicker';
		parentx.appendChild(select);
	}
	if(select != null) {
		for(x=0;x<200;x++) {		
			select.options[x] = new Option(arYears[x], arYears[x], false, false);
		}
	}
}
function getYears() {
	sforce.sessionId = getCookie('sid');
	sforce.connection.sessionId=sforce.sessionId;
	var out = [];
	// generate dates for the last 100 years
	var currentTime = new Date()
	var year = currentTime.getFullYear()
	try {
		for(x=0;x<200;x++) {
			out[x] = x+year-99;
		}	
				
	} catch(error) {
		alert(error);		
	}	
	return out;
}
dojo.addOnLoad(swapYears);
</script>

 I didn't test this but you could check for any javascript errors by using 'Inspect Element' or any functionality alike..

BeatofHeartBeatofHeart

any guess to work this in service console?

GuyClairboisGuyClairbois

Not via Messages & Alerts. But it might be possible via Custom Console Components:

https://help.salesforce.com/apex/HTViewHelpDoc?id=console2_components_overview.htm&language=en

 

As long as the javascript runs on the page, it should be possible to get it to work. But I never tried this.

BeatofHeartBeatofHeart

Thank you Good idea. ! 

BeatofHeartBeatofHeart

I just wondering i am unable to add as a custom console component . i dont see an option for adding java script on backend. but if i add in VF page its not running on all the pages like Message and Alerts.

 

Any Help will be appriciated.

GuyClairboisGuyClairbois

Hmm I hoped there would be sort of a 'general component' that could be included in the service cloud template. But it might not be possible at all..

 

In that case, you'd have to replace each of the standard pages you need this on by a VisualForce page (including the apex:detail tag to copy the standard layout) and then add the javascript to that VF page.

 

Not nice but I don't know of any alternatives currently available.

 

 

SindhuSamSindhuSam

Great...! Thank u !

Reena RajanReena Rajan
Great help Guy!! Thanks!!
Robert ColettiRobert Coletti
This is awesome - thanks for taking the time to put this out here!
hy.lim1.3897974166558203E12hy.lim1.3897974166558203E12
does this work in service console yet? with current spring 14 release?
CaffeineCaffeine
I think with the demise of the HTML Home Page hack (arbitrary HTML and Javascript disabled by SFDC on Home Page Components) that this technique will cease to work as of Summer '15.
Tony White (BNE)Tony White (BNE)
If you are using Custom VF pages, you can put this in a custom visual force component:

<apex:component >
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <span id="hideMyParent"></span> <script type="text/javascript"> $(document).ready(function() { var startYear=1925; var endYear=2020; 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:component>

Include the VF component the custom VF page and you should find the dates go back to 1925 and forward to 2020.
 
Jodylynne RowswellJodylynne Rowswell
i am new to sales force and have tried all of the above in my developer test sandbox.. but cannot get this to work.. what do i do to make the birthday field show a pick list that will go back more then  2 years...
 
Sourav PSourav P
@guyclalrbols,      Hi I tested the above, tried posted the javascript, in the message and alert. But its not working showing below issue. Seems its only for plain tect or valid HTML code only. plz suggest

User-added image
 
pradeep kumar manegallapradeep kumar manegalla
@ Sourav , 
From 2015 summer release salesforce.com took off using js in hcomponents , but with jquery we can .
Please see the below code and "MARK AS THE BEST IF YOU LIKED"
<apex:page id="myPage" standardController="Contact"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"></link> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <apex:form id="myForm"> Select Date: <apex:inputText id="sDate"/> <script type="text/javascript"> var $j = jQuery.noConflict(); $j("#myPage\\:myForm\\:sDate").datepicker({ inline: true, maxDate: 0 }); </script> </apex:form> </apex:page>
Sourav PSourav P
Hi Pradeep,
I tried the above code, but its till showing errors and to ue HTML code, plz suggest.

User-added image
pradeep kumar manegallapradeep kumar manegalla
@sourav from above mentioned i can see you are adding the code to message and alerts , well as i said home componets do not get js so we have to go through vf pages , try adding the code to vf page and use it.
rakesh.mupirirakesh.mupiri
@All,
I also recently face this issue.

By using simple css tricks it has resolved, Please paste below javascript onload or completely loading page
 
var x = document.getElementById('calYearPicker');
document.getElementById('calYearPicker').innerHTML = "";
for(var y = 2017 ; y >= 1900 ; y--){
 var option = document.createElement("option");
 option.text = y;
 x.add(option);
}

 
Dan FryattDan Fryatt
​I used jQuery to modify a date input field that was used in a Flow that's called from a Force.com site page.
Make these changes to the Force.com site page.

Note that for this particular form I needed birthdates of college students so my endYear only goes up to 2007.
Adjust for your needs and enjoy. 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var d = new Date();
var now = d.getFullYear();
var endYear=now-10;
var startYear=endYear-100;
$j = jQuery.noConflict();
$j(document).ready(function() {
	var htmlStr='';
	if(startYear<endYear){
		for(i=startYear;i<endYear+1;i++){
			htmlStr += "<option value=\""+i+"\">"+i+"</option>";
		}
	$j('#calYearPicker').html(htmlStr);
    }
});
</script>