How to use inputField to make a visualForce Datepicker

Question

Where am I going wrong? I am getting regular text fields with no datePicker functionality.

VisualForce

     <apex:form id="topform">      
         <apex:pageBlock id="calendarBlock" title="Calendar">
            <apex:pageBlockSection >
                <apex:inputField value="{!startDate}" label="Start Date"/>
                <apex:inputField value="{!endDate}" label="End Date"/>
            </apex:pageBlockSection>
         </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Controller

public class Unavailable_Dates_Controller 
{
    public String startDate{get;set;}
    public String endDate{get;set;}
}

Answer 1

Using onfocus="DatePicker.pickDate(false, this , false);" also a good idea, but you don't know when salesforce update the script and you can't guarantee your code will not break.

I'd suggest if the page is not that heavy, declare a dummy object which has a Date type field and bind it with the page.

Controller:

public class Unavailable_Dates_Controller 
{
    public objWithDateField objForStartDate{get;set;}
    public objWithDateField objForEndDate{get;set;}

    public Unavailable_Dates_Controller(){
        objForStartDate = new objWithDateField();
        objForEndDate = new objWithDateField();
    }
}

Page:

<apex:pageBlockSection >
   <apex:inputField value="{!objForStartDate.date_field__c}" label="Start Date"/>
   <apex:inputField value="{!objForEndDate.date_field__c}" label="End Date"/>
</apex:pageBlockSection>

It's good if you use the dummy object as the same what you are mostly using in your controller. Because otherwise the controller heavily depends on this helper object

Answer 2

There are two things you need to change in your code. Make your startDate and endDate as Date data type.

public class Unavailable_Dates_Controller 
{
    public Date startDate{get;set;}
    public Date endDate{get;set;}
}

As per document apex:inputField can only be use with sObject fields.

An HTML input element for a value that corresponds to a field on a Salesforce object.

There are some related post i found.

Lets explore all the ways to form Date pickers

a)Using inputfield is best solution .

Disadvantage:Field level security and profile settings .If your object dont have edit access or field is hidden for any profile the same will apply and there is no way to bypass this security if you wish to by pass for various profiles (Note this is also advantage if your requirement is not to allow edit based on profile)

b)Hackish solution with input text

Visualforce page:

<apex:page controller="datePicker" id="mypage">
<apex:form>    
    Date: <apex:inputText value="{!datename}" size="10" id="demo"    onfocus="DatePicker.pickDate(false, this , false);" />    
</apex:form>
</apex:page>

Apex Controller:

public class DatePicker {
     public String datename {get; set;}
 }

Disadvantage :hacked the JavaScript of salesforce and not officially recommended .

c)New trend after winter 14

<apex:page docType="html-5.0" />
    <apex:pageBlockSection >
        <apex:outputLabel ></apex:outputLabel>
        <apex:input label="datePicker" value="{! fDate }" type="auto"/>
    </apex:pageBlockSection>
</apex:page>

public class winter14Ctrl {
    public Date fDate { get; set; }
}

Advantage :This is native to salesforce and safely recommended

Disadvantages: Not supported in Firefox and IE. Source: http://caniuse.com/#search=input%20type Your all the instances must be updated to winter 13

d)Using jquery component to do this .Jquery library or jquery UI will have this component

disadvantage:More developer skills needed and lot of testing with different browser

Source : link

Answer 3

It is better to upload a date picker as a static resource and refer it in your Visual Force Code. So that it works in all browser.