enter image description here

How to show calender and date picks in input text and need to save in field in visual force page like as shown in below image. can anybody help me on this.

2 Answers 2


You can use jQuery datepicker to show the calendar in a vf page. Please find the below example on how to implement jQuery datepicker and pass the value from VF page to controller. Hope this helps.

Update : To display more than one month numberOfMonths: parameters needs to be used.

VF Page

<apex:page id="myPage" docType="html-5.0" controller="JqueryDatePicker">

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"></link>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <apex:form id="myForm">
      From Date: <apex:input type="date" id="fromDate" value="{!fromDate}" style="display:none;" /> <input type="text" id="fromDatePicker"></input>
      To Date: <apex:input type="date" id="toDate" value="{!toDate}" style="display:none;" /> <input type="text" id="toDatePicker"></input>
      <apex:commandButton value="Show Dates" action="{!showDates}" rerender="myPage"/>
      <script type="text/javascript">
          var $j = jQuery.noConflict();
              $j( "#fromDatePicker" ).datepicker({
                      altField: "#myPage\\:myForm\\:fromDate",
                      altFormat: "yy-mm-dd"
              $j( "#toDatePicker" ).datepicker({
                      altField: "#myPage\\:myForm\\:toDate",
                      altFormat: "yy-mm-dd"


public with sharing class JqueryDatePicker {
    public Date fromDate {get;set;}
    public Date toDate {get;set;}
    public JqueryDatePicker() {

    public PageReference showDates() {
        System.debug('######### fromDate'+fromDate);
        System.debug('######### toDate'+toDate);
        return null;



enter image description here


enter image description here

  • Thanks for you answer Saroj.its working. but i need to display two months in one input.could you plz help me.
    – user
    Commented Feb 18, 2016 at 12:12
  • It can be easily done by adding numberOfMonths: parameter in the pluggin. I have updated my example. If it answers your question, please mark it as answer. It will help others.
    – Saroj Bera
    Commented Feb 18, 2016 at 14:05
  • Hi saroj , when today date feb18 ,need to picks the future days. no need to picks the before days.when clicks before days no need to take that date. it should be hide.....
    – user
    Commented Mar 10, 2016 at 9:56
  • @user You can use minDate: 0 parameter to disable all previous dates.
    – Saroj Bera
    Commented Mar 10, 2016 at 10:04
  • like this i am using maxdate:5months(150days),but its not disabling after 5 months.
    – user
    Commented Mar 10, 2016 at 10:31

There are many examples. Some of them are as below :

For two months display go through below links

You can go through these examples. And also you can search as datepicker visualforce page in google.

  • Hi DOMINIC These link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
    – Saroj Bera
    Commented Feb 18, 2016 at 14:13
  • Thanks for your valuable feedback @SarojBera. I will do as per your suggestion in future. Commented Feb 18, 2016 at 14:21

You must log in to answer this question.

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