2

Is there an option to restrict the pass dates and say dates after few months in Date picker in VF Page?

Requirement is like a User shouldn't take an Order/Opportunity of past dates and not which belongs to another fiscal month like, For example if a user is saving an Opportunity today he shouldn't save it with past date or August or later month in Close Date.

I tried using jquery as below, But it didnt work. Please let me know if I am making any mistakes.

    <apex:page standardController="Contact">
  <head lang="en">
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  </head>
  <body>
      <apex:form >
          <apex:pageBlock>
          <apex:pageblockSection>
          <apex:inputField id="output1" value="{!Contact.Birthdate}"/>
          </apex:pageblockSection>
          </apex:pageBlock>
      </apex:form>
      <script>
          $("#datepicker").datepicker({ maxDate: new Date, minDate: new Date(2016, 8, 8) });
          alert('Hello, jQuery');
      </script>
  </body>
</apex:page>
Improve this question
3
  • Where is your datepicker field?
    – Saroj Bera
    Commented Jun 2, 2016 at 11:23
  • Contact - Birthdate a standard field, cant we implement that range in a standard field?
    – C. Praveenkumar
    Commented Jun 2, 2016 at 11:56
  • 1
    You will have various methods on jquery date picker to disable few dates, min and max date etc.., go through the following link and check if anything can help, spiceforms.com/blog/…
    – Anurag
    Commented Jun 2, 2016 at 13:53

1 Answer 1

Reset to default
2

I also faced this problem, If you use standard <apex:inputField for Date data type you have to use doctype="html 5.0" and type="date" component in <apex:inputField tag. But HTML5 input tags may not be supported on all browsers. Where as jQuery Calendar can be used everywhere.

As a workaround what I did is I created a <apex:inputHidden field and used it as a container for binding the date field Selected_Date__c. And placed a normal html <input field to show the jQuery datepicker. On the page load, the formatted value for Selected_Date__c is stored in a JavaScript variable defaultDate and assigned to the html <input field. Also the calendar value is copied to the <apex:inputHidden by the onchange event of the html <input field.

This way you will be able to hold the input from the jQuery Calendar and use it from the Instance in a controller.

<apex:page id="myPage" standardController="Book__c">
    <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">
        Select Date: <apex:inputHidden value="{!Book__c.Selected_Date__c}" id="selDate" />
        <input type="text" id="fromDatePicker" onchange="jQuery('#myPage\\:myForm\\:selDate').val(jQuery('#fromDatePicker').val());"></input>
    </apex:form>
    <script type="text/javascript">
        var defaultDate='<apex:outputText value="{0,date,MM'/'dd'/'yyyy}"><apex:param value="{!Book__c.Selected_Date__c}"/></apex:outputText>';
        jQuery( "#fromDatePicker" ).val(defaultDate).datepicker({
            altField: "#myPage\\:myForm\\:selDate",
            altFormat: "yy-mm-dd",
            minDate: new Date(),
            maxDate: new Date(2016, 8, 8)
        });
    </script>
</apex:page>

Screen

enter image description here

Improve this answer
0

You must log in to answer this question.

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