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!


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

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.