function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sarvesh001sarvesh001 

Custom date picker

Hi,

i want to insert  custom date picker .

can any one suggest me.
Best Answer chosen by sarvesh001
Anoop yadavAnoop yadav
Hi,

Try the below code to extend the years.

Controller
public with sharing class DatePickerController 
{
    public String datename { get; set; }
}

Page
<apex:page controller="DatePickerController" id="mypage">
    
	<script type="text/javascript">
		function insert(pobjSelect, psText, psValue){
			var lobjOption = document.createElement("Option"); lobjOption.text = psText;  lobjOption.value = psValue;  pobjSelect.options.add(lobjOption);
		}
	var winLoaded = window.onload;
	window.onload = function(){   if(winLoaded){
	  winLoaded();
	}
	var e = document.getElementById("calYearPicker");
	 if(e != null){
	  for(i = e.length - 1; i>=0; i--){
	   e.remove(i);
	  }
	  var d = new Date();    var startYear = d.getFullYear() + 6;
	  for(var i = 1920; i<startYear; i++){    insert(e, i, i);   }  }
	}
</script>
	<apex:form >    
        Date: <apex:inputText value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, this , false);" />    
    </apex:form>
</apex:page>

All Answers

Anoop yadavAnoop yadav
Hi,

Check the below links,
http://salesforce.stackexchange.com/questions/17992/binding-custom-date-picker
http://bobbuzzard.blogspot.in/2012/03/custom-date-picker.html
Raja ReddyRaja Reddy
Hi Sarvesh001,

VF PAGE:
<apex:page controller="DatePickerController" id="mypage">
    <apex:form >    
        Date: <apex:inputText value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, this , false);" />    
    </apex:form>
</apex:page>
APEX CLASS:
public with sharing class DatePickerController 
{
    public String datename { get; set; }
}

OUTPUT:

User-added image

If my answers solves your problem, please mark it as Best Answer, so that other can take benefit of this post.
sarvesh001sarvesh001
Hi Raja Reddy,


Thanks for replay
I have used this date picker but in this can we extend the years....
sarvesh001sarvesh001
HI Raja Reddy,

How to extend the years in the above code.
Anoop yadavAnoop yadav
Hi,

Try the below code to extend the years.

Controller
public with sharing class DatePickerController 
{
    public String datename { get; set; }
}

Page
<apex:page controller="DatePickerController" id="mypage">
    
	<script type="text/javascript">
		function insert(pobjSelect, psText, psValue){
			var lobjOption = document.createElement("Option"); lobjOption.text = psText;  lobjOption.value = psValue;  pobjSelect.options.add(lobjOption);
		}
	var winLoaded = window.onload;
	window.onload = function(){   if(winLoaded){
	  winLoaded();
	}
	var e = document.getElementById("calYearPicker");
	 if(e != null){
	  for(i = e.length - 1; i>=0; i--){
	   e.remove(i);
	  }
	  var d = new Date();    var startYear = d.getFullYear() + 6;
	  for(var i = 1920; i<startYear; i++){    insert(e, i, i);   }  }
	}
</script>
	<apex:form >    
        Date: <apex:inputText value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, this , false);" />    
    </apex:form>
</apex:page>

This was selected as the best answer
sarvesh001sarvesh001
Hi Anoop Yadav ,

Thanks for replay..