-1

I need to show Date box (it should not be hidden after select day month and year).

i don't know how can i implement it in visualforce page.

just like below image.

enter image description here

I tried this code but it will hide after selection <apex:input type="date" value="{!date}"/>

my question is solved but NOW, i need standard calendar on my visualforce page. Is it possible ?

closed as off-topic by Chris Duncombe, Vamsi Krishna, superfell, Adrian Larson, crmprogdev Aug 31 '15 at 16:17

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on problems in code you've written must describe the specific problem and include valid code to reproduce it. For help writing short, self-contained syntactically-valid examples, see: SSCCE.org" – Chris Duncombe, Vamsi Krishna, superfell, Adrian Larson, crmprogdev
If this question can be reworded to fit the rules in the help center, please edit the question.

  • I tried this code but it will hide after selection <apex:input type="date" value="{!date}"/> – Nihar Aug 31 '15 at 11:58
  • If you don't wan't to hide after selection, then when it will close? – Saroj Bera Aug 31 '15 at 15:49
  • I have updated my solution. Hope this helps. – Saroj Bera Aug 31 '15 at 17:14
  • Nihar, if your question is solved and you want to ask a different question, please do not update your question but ask a new question – Samuel De Rycke Sep 1 '15 at 12:11
2

This is doable using jQuery UI Date Picker.

Visualforce Page:

<apex:page id="myPage" docType="html-5.0" controller="TestJQDatePicker">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <script>

      var $j = jQuery.noConflict();
      $j(document).ready(function() {
          $j( "#datepicker" ).datepicker({
                  altField: "#myPage\\:myForm\\:DateValue",
                  altFormat: "yy-mm-dd"
           });
      });

  </script>

  <apex:form id="myForm">
      Select Date: <apex:input type="date" id="DateValue" value="{!selectedDate}" /> <div id="datepicker"></div>
  </apex:form>
</apex:page>

Output: enter image description here

The date picker remains visible after the date is selected. Also note that altField parameter is used to define which input should get auto-populated with value after the date is selected. And altFormat is required as otherwise type="date" field rejects the default format of the date picker.

Hope this helps!

  • One more thing to note is that under the altField parameter, I had to escape the ":" using "\\" to specify the Id of the field that should receive the selected value. jQuery throws an error if the field id contains a colon. – Aayush K Aug 31 '15 at 14:50
-1

Update

Sorry, I have not noticed the question carefully earlier. The question was to display the datepicker even after user clicks on the date. Yes you can do it by adding little javascript hack. What happens when user clicks on the date, the Salesforce js automatically hides the datepicker div. What you have to do is to display the div again. I have update my solution as below. Hope this helps.

Updated Solution

VF Page

<apex:page docType="html-5.0" controller="SampleDatePicker">
<apex:form >
    <apex:pageBlock >
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                Date 2 : <apex:inputText value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, this , false);" /> 
            </apex:pageBlockSectionItem>            
        </apex:pageBlockSection>
    </apex:pageBlock>
    <script type="text/javascript">
        window.onload = function() {
            document.getElementById("datePicker").addEventListener("click", displayDate);
        };
        function displayDate() {
            document.getElementById("datePicker").style.display = 'block';
        }    
    </script>
</apex:form>
</apex:page>

Controller

public with sharing class SampleDatePicker {
    public String datename {get; set;}
    public SampleDatePicker() {

    }
}

Previous Solution

Salesforce has an inbuilt datepicker. You don't have to add JS library for this. Please find the code below. don't forget to add docType="html-5.0" in page tag like shown below

Vf Page

<apex:page docType="html-5.0" controller="SampleDatePicker">
<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>

Controller

public with sharing class SampleDatePicker {
    public Date dat {get;set;}
    public SampleDatePicker() {

    }
}

Output

enter image description here

  • Yes but the OP needs the date picker to remain open after the date is selected. – Aayush K Aug 31 '15 at 15:23
  • @AAU Thanks for your comment. I have updated the solution. – Saroj Bera Aug 31 '15 at 16:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.