[SalesForce] how to view calendar in visual force page

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.

Best Answer

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({
                      numberOfMonths:2,
                      altField: "#myPage\\:myForm\\:fromDate",
                      altFormat: "yy-mm-dd"
               });
              $j( "#toDatePicker" ).datepicker({
                      numberOfMonths:2,
                      altField: "#myPage\\:myForm\\:toDate",
                      altFormat: "yy-mm-dd"
               });
               $j("#fromDatePicker").value($j("#myPage\\:myForm\\:fromDate").value());
               $j("#toDatePicker").value($j("#myPage\\:myForm\\:toDate").value());
      </script>
    </apex:form>
</apex:page>

Controller

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

}

Screen-1

enter image description here

Screen-2

enter image description here

Related Topic