I want to throw an error message on a popup, when the datepicker chooses a future date(other than today's date).

Please how can I do it?

Visualforce code:

<apex:page standardcontroller="RELVSSubmission__c" 
          extensions="RELVSRenewalController" showheader="false" sidebar="false">
            <apex:pageblock id="close">
           <apex:pageblocksection title="Legal Name Change" columns="1">
                 <apex:pageblocktable value="{!aAccount}" var="item" id="editAccountName">
            <apex:column headervalue="Proposed Legal Name">
            <apex:inputtext value="{!UpdatedLegalName}"/>
           <apex:column headervalue="Reason for Name Change">
           <apex:inputtextarea value="{!LegalNameChangeReason}"/>
           <apex:column headervalue="Date the Name was Changed">
          <apex:inputfield value="{!item.RELVSLegalNameChangeDate__c}" />
       <apex:pageblockbuttons location="bottom" >
        <apex:commandButton value="Save" action="{!UpdateAccountLegalName}" />
        <apex:commandbutton value="Cancel" onclick="window.close()" />


public Date LegalNameChangeDate {get; set;}

public PageReference UpdateAccountLegalName(){
if(aAccount.Name != null){
   aAccount.Name = UpdatedLegalName;
   aAccount.REL_VS_LegalNameChangeReason__c = LegalNameChangeReason;
   aAccount.REL_VS_LegalNameChangeDate__c  = LegalNameChangeDate;  
   upsert aAccount;
   return new PageReference('javascript:window.opener.location.reload();window.self.close();');

Please help!

1 Answer 1


Create a javascript method that reads the field, checks the date and if it's in the future display an alert/clear the field.

Since this is a SF site I'm going to focus on that part of it, If you need JS help head over to https://stackoverflow.com

Identify your field

Salesforce automatically adds the ids of all of the parent elements to the front of an element's Id (the Id will look something like j00:j01:j02:dateField). To simplify things, I usually add a classname so that I can search by that instead:

<apex:inputField value="{!date_field__c}" styleClass="dateField" onchange="validateDate(this)" />



If you absolutely want to use ID instead of class, your JS will have to use the {!$Component} attribute provided by the page:

var dateField = document.getElementById('{!$Component.Full.Path.To.Element}');

Where full path to element is all of the ids of the parent element (yes, this means every parent tag should have a defined ID).


I wrote the tag in a specific way to allow for a few different methods. First you can try something like the following:

var dateField = document.getElementsByClassName('dateField')[0];

If you only have the 1 field with that class, you should be able to find it pretty easily.


var j$ = jQuery.noConflict(); // super important in vf
var dateField = j$('.dateField');

Lastly, since we pass "this" as a parameter you can also do something like:

function validate(elem) {
    var dateField = elem;

Then read your field and attempt to validate the date:

if (isFutureDate(dateField)) {
    alert('Cannot select a date in the future.');
    dateField.value = '';

Again, for help on processing the field to get the date value and compare it to today's date, head over to https://stackoverflow.com


You must log in to answer this question.

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