November 30, 2012

Date picker in Visualforce page

Sample Code1:

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

Apex Controller:

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

    }
}

Output:



Sample Code2:

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;}
}


Output:



8 comments:

  1. Change the visualforce page version to 27 - 28 in order for DatePicker to work

    ReplyDelete
  2. works great! Thanks for the post

    ReplyDelete
  3. Thanks for the post, its works great....

    if anyone facing problem with this, don't forget to add docType="html-5.0" in page tag like shown below

    ReplyDelete
  4. in calender i want years to be started from 1980 .... what to do ?

    ReplyDelete