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
mramaprasad.ax1826mramaprasad.ax1826 

How to get datepicker working in visualforce page

I need to add a date field on to the visualforce page (similar to the date fields we have in opportunity page). 
<apex:page standardController="OpportunityLineItem" extensions="overrideCon" sidebar="true" showHeader="true">

<apex:form id="oppProductForm">

<apex:pageBlock >
    
             
           <div class="pbBody">
                <div class="pbSubheader brandTertiaryBgr first tertiaryPalette" id="head_1_ep">
                    <span class="pbSubExtra"><span class="requiredLegend brandTertiaryFgr"><span class="requiredExampleOuter"><span class="requiredExample">&nbsp;</span></span>
                    <span class="requiredMark">*</span><span class="requiredText"> = Required Information</span></span></span><h3>Product Information<span class="titleSeparatingColon">:</span></h3></div><div class="pbSubsection">
                </div>
                <table class="detailList" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                    <tr>
                        <td class="labelCol">Opportunity&nbsp;&nbsp;</td><td class="dataCol col02">{!opp.name}</td>
                        <td class="dataCol"><span class="dateInput dateOnlyInput"><input id="ServiceDate" name="ServiceDate" onfocus="DatePicker.pickDate(false, 'ServiceDate', false);" size="12" tabindex="6" type="text" data-uidsfdc="26"/><span class="dateFormat">[&nbsp;<a href="javascript:DatePicker.insertDate('', 'ServiceDate', true);" tabindex="6"></a>&nbsp;]</span></span></td>
                        
                    </tr>
                    <tr><td class="labelCol">Opportunity id &nbsp;&nbsp;</td><td class="dataCol col02">{!opp.Id}</td></tr>
                    <tr>    <td class="labelCol">Product&nbsp;&nbsp;</td><td class="dataCol col02">{!pro.name}</td></tr>
                    <tr>   <td class="labelCol">Quantity&nbsp;&nbsp;</td><td class="dataCol col02"><apex:inputField value="{!OpportunityLineItem.Quantity}"/></td></tr>
                    </tbody>
                </table>
            </div>
</apex:pageBlock>
</apex:form>
</apex:page>

I need simialr functionality as in the opportunity form (current date display and pop of the calender on the date field focus).

Please help.
 
James LoghryJames Loghry
Visualforce provides a native way of doing this by utilizing <apex:outputField value="{!OpportunityLineItem.Your_Date_Field__c}" /> 

If the datepicker isn't for a specific field, you could always create an empty object and use some arbitrary date field as well.
mramaprasad.ax1826mramaprasad.ax1826
I modified to <td class="labelCol">Date&nbsp;&nbsp;</td> <td><apex:InputField value="{!OpportunityLineItem.ServiceDate}" /> </td>

Date field and calender shows up fine but when the page is loaded the calender is automatically loaded. I want to show the pop up calender only then the date field is in focus. 
 
mramaprasad.ax1826mramaprasad.ax1826
I moved the focus to another field on the form and works fine.

Thanks
Malini