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:



Cheers!!!

19 comments:

  1. Date Picker not displaying calender

    ReplyDelete
  2. how can be display calender

    ReplyDelete
  3. Date Picker is not working what exactly it as shown in the site.

    ReplyDelete
  4. its not working dude...

    ReplyDelete
  5. Date picker doesnt show calender.

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

    ReplyDelete
  7. Selected date from the calendar is not placed on the field.

    ReplyDelete
  8. 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
  9. It's not working in mozilla, working great in chrome.

    ReplyDelete
  10. Works great in Chrome. Best answer on the web. Can you provide an example of 2 date fields; from and to. Then click on an image to display event activities for user signed on?

    ReplyDelete
  11. Date picker shown in sample code 1 is not working in Mozilla Firefox and IE...
    Please help !

    ReplyDelete
  12. iam not getting datepicker also not getting versions 27-28..help me

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

    ReplyDelete
    Replies
    1. Then you have to try some HTML Date picker.

      Delete