+ Start a Discussion

issue with custom input picker


I have scenario where i have to search data with start date and end date, for this iam using custom input picker but its not getting any calender to pick date.

with refere: http://bobbuzzard.blogspot.in/2012/03/custom-date-picker.html 

User-added image
VF Page:
<apex:page controller="ExpensesClass" >
<apex:includeScript value="{!URLFOR($Resource.Calendar,'calendar/calendar.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Calendar,'calendar/calendar_blue.css')}" />

<apex:form >
<apex:pageBlock >
<apex:pagemessages />
<apex:pageBlockSection title="Search Criteria"  collapsible="false">
<apex:pageBlockSectionItem >
Start Date<apex:inputText value="{!startdate}" size="10" id="startdate" onmouseover="initialiseCalendar(this, '{!$Component.startdate}')" />
<apex:pageBlockSectionItem >

End Date<apex:inputText value="{!enddate}" id="enddate" size="10" onmouseover="initialiseCalendar(this, '{!$Component.enddate}')"/>
<apex:pageBlockSectionItem >
<apex:outputLabel value="Owner Name:"/>
<apex:inputText value="{!nameQuery}"/>

<apex:pageBlockSectionItem >
<apex:CommandButton action="{!executeSearch}" value="Search"  />

function fnSetDateFormat(oDateFormat)
 oDateFormat['FullYear'];  //Example = 2007
 oDateFormat['Year'];   //Example = 07
 oDateFormat['FullMonthName']; //Example = January
 oDateFormat['MonthName'];  //Example = Jan
 oDateFormat['Month'];   //Example = 01
 oDateFormat['Date'];   //Example = 01
 oDateFormat['FullDay'];   //Example = Sunday
 oDateFormat['Day'];    //Example = Sun
 oDateFormat['Hours'];   //Example = 01
 oDateFormat['Minutes'];   //Example = 01
 oDateFormat['Seconds'];   //Example = 01
 var sDateString;
 // Use dd/mm/yyyy format
 sDateString = oDateFormat['Date'] +"/"+ oDateFormat['Month'] +"/"+ oDateFormat['FullYear'];
 return sDateString;
function initialiseCalendar(obj, eleId)
 var element=document.getElementById(eleId);
 var params='close=true';
 if (null!=element)
  if (element.value.length>0)
   // date is formatted dd/mm/yyyy - pull out the month and year
   var month=element.value.substr(3,2);
   var year=element.value.substr(6,4);
 fnInitCalendar(obj, eleId, params);


public class ExpensesClass {
public string nameQuery{get;set;}
public List<Expense__c> expensesList{get;set;}
public Boolean isTableExit {get;set;}
public Date enddate{get; set;}
public Date startdate{get; set;}

public ExpensesClass(){
//expList =[Select id, Item__c, owner.name,sum(Amount__c) From Expense__c];
public PageReference executeSearch(){
string str='%'+nameQuery+'%';
if(nameQuery==null || nameQuery==''){
    //errormessage ='Name cannot be null or empty. Please Try Again.';
    ApexPages.addmessage(new ApexPages.message(ApexPages.severity.ERROR,'Please Enter Owner Name'));
expensesList=[Select id, Item__c, owner.name,Amount__c, Date__c From Expense__c where owner.name LIKE:str Limit:limitsize Offset:offsetsize];

isTableExit =true;
return null;

Thabks in advance,
Hi Sain,

Try with below code and change your page version to 27  it will help  .
Date:<apex:inputText value="{!startDate}" size="10" id="stdt" onfocus="DatePicker.pickDate(false, this , false);" />

If you want any restriction in date selection please check belwo link where you can restrict user to select past date .


LEt me know if it helps .