Date Validation in Lightning Compononents

In this post we are going to see how we can validate the date for any form which takes some input along with the date.
For Example you are enrolling yourself of the some concert on certain date in the events portal and you are submitting your attendance confirmation for this event. So in this case you cannot select the past dates for the events which you will be attending. Lets see how we can validate this in Lightning component.

Step 1: Create a lightning component.

Launch the Developer Console, Goto File > New > Lightning Component

_________________________________________________________________________

<aura:component>

    <!--create myDate aura attribute for store date field value-->  

    <aura:attribute name="myDate" type="date" />

    <!--create dateValidationError boolean attribute for show error msg on invalid selection

      and disable submit button -->    

    <aura:attribute name="dateValidationError" type="boolean" />

    

    

    <div class="slds-p-around_medium">

        

        <lightning:input class="{! v.dateValidationError ? 'slds-has-error' : ''}"

                         type="date"

                         label="Renewal Date"

                         value="{!v.myDate}"

                         name="date"

                         onchange="{!c.dateUpdate}" />

        

        <aura:if isTrue="{!v.dateValidationError}">

            <div class="slds-text-color_error slds-p-left_x-small">

                Kindly Select the Dates in Present or Future

            </div>

        </aura:if>    

        

        <br/>

        

        <lightning:button disabled="{!v.dateValidationError}" variant="brand" onclick="{!c.submit}" label="Submit"></lightning:button>

        

    </div>       

</aura:component>

_________________________________________________________________________

Step 2: Create a clientside Javascript controller

({

   /*call dateUpdate function on onchange event on date field*/ 

    dateUpdate : function(component, event, helper) {

        

        var today = new Date();        

        var dd = today.getDate();

        var mm = today.getMonth() + 1; //January is 0!

        var yyyy = today.getFullYear();

     // if date is less then 10, then append 0 before date   

        if(dd < 10){

            dd = '0' + dd;

        } 

    // if month is less then 10, then append 0 before date    

        if(mm < 10){

            mm = '0' + mm;

        }

        

     var todayFormattedDate = yyyy+'-'+mm+'-'+dd;

        if(component.get("v.myDate") != '' && component.get("v.myDate") < todayFormattedDate){

            component.set("v.dateValidationError" , true);

        }else{

            component.set("v.dateValidationError" , false);

        }

    },

    

    submit : function(component,event,helper){

      // get the 'dateValidationError' attribute value

        var isDateError = component.get("v.dateValidationError");

        

        if(isDateError != true){

            alert(' Submission is completed');

        }

    }

})

_________________________________________________________________________________

Step 3 : Create a Lighting Application

From Developer Console > File > New > Lightning Application

<aura:application extends="force:slds">

    <c:dateValidation/>

<!-- default namespace prefix is c:-->

</aura:application>