+ Start a Discussion
SainSain 

Custom Input Date Picker not working

Hi,

I am developing a VF page, where i have implemented custom date input field but it is not working.

Please help to know where i am going wrong.

VF page:
<apex:page controller="CustomCalendarClass">
<apex:includeScript value="{!URLFOR($Resource.JSCalander,'calendar/calendar.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JSCalander,'calendar/calendar_blue.css')}" />
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
Start Date<apex:inputText value="{!startdate}" size="10" id="startdate" onmouseover="initialiseCalendar(this, '{!$Component.startdate}')" />

</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>
<script>
$(function() {
$( "#expdate" ).datepicker();
$( "#anim" ).change(function() {
$( "#expdate" ).datepicker( "option", "showAnim", $( this ).val() );
});
});
</script>
</apex:page>

Class:
public with sharing class CustomCalendarClass {
public string startdate {get;set;}
}

Regards,
Sain
ManojjenaManojjena
Hi Sain,

Try with below it will help 
<apex:inputText value="{!inputText1}" size="10" id="demo" onfocus="DatePicker.pickDate(false, this , false);" />

 
ManojjenaManojjena
Hi Sain ,
Incase you need and restriction in date picker please check below link it will help !!

http://manojjena20.blogspot.in/2015/05/custom-date-picker-to-restrict-user-to.html