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>
      <apex:form >
          <apex:inputField id="output1" value="{!Contact.Birthdate}"/>
          $("#datepicker").datepicker({ maxDate: new Date, minDate: new Date(2016, 8, 8) });
          alert('Hello, jQuery');
  • Where is your datepicker field?
    – Saroj Bera
    Jun 2 '16 at 11:23
  • Contact - Birthdate a standard field, cant we implement that range in a standard field? Jun 2 '16 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
    Jun 2 '16 at 13:53

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>
    <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)


enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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