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


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.

| improve this answer | |

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",


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

| improve this answer | |

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.