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>