Hi,

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 


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>
<apex:pageBlockSectionItem >

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

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

<script>
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);
   params+=',month='+month;
   params+=',year='+year;
  }
 }
 fnInitCalendar(obj, eleId, params);
}
</script>
</apex:page>

Class:

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'));
}else{
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,
Shaik