Need help editing this VF page so it will respect apex-input for reference field

Question

I am new here and trying to stick to guidelines by posting a new question instead of in an answer :)

My issue is exactly the same as this issue: Custom Value Picker

Meaning that I have installed the "Mass Update And Mass Edit From List View" package from AppExchange and had the same trouble where if I use it to edit a Lookup or Master-Detail field it won't use the native salesforce lookup tool and force me to enter a salesforce ID instead.

To be specific I am not able to implement the following functionality by editing the VF page wizard at step 3:

• the ability to use a date picker for date/date-time field
• the ability to use search for a look up field

I read what @mast0r wrote:

To get a native functionality of salesforce.com like a datepicker or a lookup search popup window you need to use apex:inputField components of the visualforce:

Visualforce input fields

As of winter 14 release you can use apex:input field type for this purpose (for this you need to set the API Version to 29):

apex:input

So I have changed the Visualforce page to API Version 29, changed the code from

apex:inputText rendered="{!fieldType='REFERENCE'}" value="{!valueToUpdate}"

to

apex:input rendered="{!fieldType='REFERENCE'}" value="{!valueToUpdate}"

However it still just gave me the text field and I didn't see date picker or the lookip tool. The controller is still on API version 14 as I can't change it. (Maybe I need to brute force it by coding it in a sandbox again?)

The modified VF page:

<apex:page standardController="KH_Order__c" recordSetvar="unused" extensions="MassUpdateSimpleController" id="page" docType="html-5.0">

  <!-- for this page to work with a specific custom object, change standController="entityname" to custom object api name  
    For example, if custom object name is Warehouse__c, change first part of the first line to standardController="warehouse__c" -->

  <apex:includeScript value="{!$Resource.UtilJS}" />
  <apex:form id="wizard">

  <apex:sectionHeader title="Mass Update Wizard" subtitle="Step {!step} of 5"/>

      <apex:pageBlock id="step1" title="Step 1. Confirm records to be updated" mode="edit" rendered="{!step='1'}">
            <apex:pagemessages escape="false"></apex:pagemessages>
            <apex:pageBlockSection >
            <apex:pageBlockTable var="a" value="{!selected}">
                <apex:column value="{!a.Name}"/>
                <apex:column value="{!a.Order_Status_auto__c}"/>
                <apex:column value="{!a.Village__c}"/>
                <apex:column value="{!a.Order_Date__c}"/>
                <apex:column value="{!a.Sanitation_Teacher__c}"/>
                <apex:column value="{!a.LBO__c}"/>
            </apex:pageBlockTable>
            </apex:pageBlockSection>

          <apex:pageBlockButtons >
              <apex:commandButton action="{!cancel}" value="Previous"/>
              <apex:commandButton action="{!step2}" value="Next"/>
          </apex:pageBlockButtons>
      </apex:pageBlock> 

      <apex:pageBlock id="field" title="Step 2. Specify the field to be updated" mode="edit" rendered="{!step='2'}">
          <apex:pagemessages escape="false"></apex:pagemessages>
          <apex:selectList id="pickList" size="1" value="{!fieldName}" required="true">
              <apex:selectOptions value="{!fieldTypeOptions}"/>
          </apex:selectList>
          <apex:pageBlockButtons >
              <apex:commandButton action="{!step3}" value="Next"/>
              <apex:commandButton action="{!cancel}" value="Cancel" onclick="return confirmCancel()" immediate="true" style="margin-left: 2em"/>
          </apex:pageBlockButtons>
      </apex:pageBlock> 

      <apex:pageBlock id="step3" title="Step 3. Specify the new value for field - {!fieldName}" mode="edit" rendered="{!step='3'}">
         <apex:pagemessages escape="false"></apex:pagemessages>
         <apex:inputText rendered="{!fieldType='CURRENCY'}" value="{!valueToUpdate}" />
         <apex:input rendered="{!fieldType='DATE'}" value="{!valueToUpdate}" />
         <apex:input rendered="{!fieldType='DATETIME'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='TEXT'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='NUMBER'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='COMBOBOX'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='DOUBLE'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='EMAIL'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='ID'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='INTEGER'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='PERCENT'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='MULTIPICKLIST'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='PHONE'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='STRING'}" value="{!valueToUpdate}" />
         <apex:input rendered="{!fieldType='REFERENCE'}" value="{!valueToUpdate}" />
         <apex:inputText rendered="{!fieldType='BASE64'}" value="{!valueToUpdate}" />
         <apex:inputTextArea rendered="{!fieldType='TEXTAREA'}" rows="15" cols="100" value="{!valueToUpdate}" />
         <apex:inputCheckBox rendered="{!fieldType='BOOLEAN'}" value="{!valueToUpdate}" />
         <apex:selectList rendered="{!fieldType='PICKLIST'}" value="{!valueToUpdate}" size="1">
         <apex:selectOptions value="{!picklistvalues}"/>
         </apex:selectList>
             <apex:pageBlockButtons >
              <apex:commandButton action="{!step2}" value="Previous"/>
              <apex:commandButton action="{!step4}" value="Next"/>
              <apex:commandButton action="{!cancel}" value="Cancel" onclick="return confirmCancel()" immediate="true" style="margin-left: 2em"/>
             </apex:pageBlockButtons>
      </apex:pageBlock> 

      <apex:pageBlock id="step4" title="Step 4. Confirmation" mode="edit" rendered="{!step='4'}">
          <apex:pagemessages escape="false"></apex:pagemessages>
          <apex:pageBlockButtons >
              <apex:commandButton action="{!step3}" value="Previous"/>
              <apex:commandButton action="{!step5}" value="Update"/>
              <apex:commandButton action="{!cancel}" value="Cancel" onclick="return confirmCancel()" immediate="true" style="margin-left: 2em"/>
          </apex:pageBlockButtons>
      </apex:pageBlock> 


      <apex:pageBlock id="step5" title="Step 5. Results" mode="edit" rendered="{!step='5'}">
          <apex:pagemessages escape="false"></apex:pagemessages>
          <apex:pageBlockButtons >
              <apex:commandButton action="{!cancel}" value="Done"/>
          </apex:pageBlockButtons>
      </apex:pageBlock> 

  </apex:form>
</apex:page>

Thank you in advance, Gordon

Answer 1

use the below code to add date picker functionality in vf page

<apex:page docType="html-5.0" controller="Sample">
<apex:form >
<apex:pageBlock >
    <apex:pageBlockSection>
        <apex:pageBlockSectionItem>
            Date: <apex:input type="date" value="{!dat}"/>
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>

</apex:pageBlock>
</apex:form>
</apex:page>

controller:

public class Sample {
public Date dat {get;set;}
public Sample() {

}
 public Date fDate { get; set; }

}

Please let me know if this helps you.