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


     <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 Controller

public class Unavailable_Dates_Controller 
    public String startDate{get;set;}
    public String endDate{get;set;}
  • 1
    datepicker will be rendered for Date / DateTime fields. the start & end date properties in your controller are of type String. if you change them from String to Date / DateTime it should work. Commented Oct 7, 2015 at 2:08
  • Please use below link. salesforce.stackexchange.com/questions/94232/… Commented Oct 7, 2015 at 3:10
  • 1
    @VamsiKrishna, <apex:inputField /> works only for sObject fields AFAIK. You can't bind class fields there and get Datepicker works
    – highfive
    Commented Oct 7, 2015 at 4:58

3 Answers 3


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.


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();


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

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


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">
    Date: <apex:inputText value="{!datename}" size="10" id="demo"    onfocus="DatePicker.pickDate(false, this , false);" />    

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"/>

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

  • Thanks prabhat. I found the linked post before posting my own question. I want to use example a) method but he doesn't explain it as thoroughly as he does b) and c) Commented Oct 7, 2015 at 2:49
  • Alex... I did not find any standard functionality...You can use third party tool to show date picker. jqueryui.com/datepicker
    – MIX DML
    Commented Oct 7, 2015 at 2:58

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .