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
manu123manu123 

Calendar/Masking for Date Element

I am trying to implement a requirement for date field. 
1. When Date field is clicked, calendar should popup and so that date can be selected.
2. When i enter Date, Date field should be autopopulated with a '/', a masking of date as mm/dd/yyyy

Both calendar and masking are working but selected date is not saved to the object.
Please provide direction on implementing this feature

Here is my visualforce page
<apex:page showHeader="false" sidebar="false" standardcontroller="timeobject__c">  
<apex:includeScript value="{!URLFOR($Resource.JSCalendar,'calendar.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JSCalendar,'calendar_blue.css')}" />
<apex:includeScript value="{!URLFOR($Resource.jquerymaskedinput3, 'jquery.maskedinput-master/lib/jquery-1.8.3.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquerymaskedinput3, 'jquery.maskedinput-master/src/jquery.maskedinput.js')}"/>

<apex:form id="CustomerDate">            
    <apex:pageBlock >         
        <apex:pageBlockSection>   
        <apex:inputField id="customerDate" value="{!timeobject__c.Date__c}" showDatePicker="false"
                  onmouseover="initialiseCalendar(this, '{!$Component.customerDate}')" styleClass="date-mask"/>   
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:commandButton value="Next" action="{!save}" id="save"/>     
</apex:form>           


<script>
$(".date-mask").mask("99/99/9999");

}

function fnSetDateFormat(oDateFormat)
{
 oDateFormat['FullYear'];  
 oDateFormat['Year'];   
 oDateFormat['FullMonthName']; 
 oDateFormat['MonthName'];  
 oDateFormat['Month'];
 oDateFormat['Date'];
 oDateFormat['FullDay'];
 oDateFormat['Day'];
 oDateFormat['Hours'];
 oDateFormat['Minutes'];
 oDateFormat['Seconds'];
 
 var sDateString;
 sDateString = + oDateFormat['Month'] +"/" + oDateFormat['Date'] +"/"+ 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)
  {
   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>