Display only future dates in Datepicker

Question

Here is my code snippet

<apex:input value="{!eventDateSelected}" size="10" type="auto" />

I want to show only future dates or error message if data is past date.

Thanks in advance!!!

Answer 1

you can use Jquery datepicker. It is easy to control these thing in jQuery Datepicker.

Here is a code sample for you.

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

Here minDate: dateToday is key.

Answer 2

Here is a complete solution where you can use <apex:input type="date" with jQuery Datepicker where property minDate set to 0 (to show only future dates). I used a normal html <input type="text" to show the jQuery Datepicker and hide the <apex:input type="date" field. The entered value is copied with the code $j("#fromDatePicker").value($j("#myPage\\:myForm\\:fromDate").value());. Hope this helps.

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">
      Select Date: <apex:input type="date" id="fromDate" value="{!fromDate}" style="display:none;" /> <input type="text" id="fromDatePicker"></input>
      <script type="text/javascript">
          var $j = jQuery.noConflict();
              $j( "#fromDatePicker" ).datepicker({
                      altField: "#myPage\\:myForm\\:fromDate",
                      altFormat: "yy-mm-dd",
                      minDate:0
               });
               $j("#fromDatePicker").value($j("#myPage\\:myForm\\:fromDate").value());
      </script>
    </apex:form>
</apex:page>

Controller

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

    }
}