function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
IntroAmmyIntroAmmy 

If age is more than 18 years then few field should be hide in page using lightning component

I have created lightning component and 6 fields there, one date field is also there
how can we do that if age is more than 18 years then 2 fields shoud be hide.
Can please someone help me on that...

Thanks in advance
Best Answer chosen by IntroAmmy
CharuDuttCharuDutt
Hii Amit Singh
Try The Below Code 
<aura:component>
    <aura:attribute name="FieldsToShow" type="boolean" default="true"/>
    <lightning:card>
       
    <lightning:recordEditForm aura:id="recordEditForm"
                           objectApiName="Contact">
        
        <lightning:inputField fieldName="Name" />
        
        <lightning:inputField fieldName="Birthdate" onchange="{!c.changeDate}" />
        <aura:if isTrue="{!v.FieldsToShow}">
          <lightning:inputField fieldName="Phone" />
        </aura:if>
        <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
    </lightning:recordEditForm>
    </lightning:card>
	
</aura:component>



CONTROLLER

({
	changeDate : function(component, event, helper) {
        var selectDate = event.getSource().get('v.value');
        
        console.log('selectedDate : ' + selectDate);
        
        
        
        
        const date1 = Number(selectDate.substring(0, 4));
        alert(date1);
        const date2 = new Date();
        var year = date2.getFullYear();
          
        var Age = year-date1;
        alert(Age);
        
        
           if(Age < 18){
        component.set("v.FieldsToShow",false);    
        }
        else if(Age > 18){
            component.set("v.FieldsToShow",true);    
        }
		
	}
})
Please Mark It As Best Answer If It Helps
Thank You!

 

All Answers

Naresh AltokkNaresh Altokk
JS:

handleDOB(event){
this.showFields = this.dateDiff(event.target.value);
}

dateDiff(fromDate)
    {
        const date1 = new Date(fromDate);
        const date2 = new DateTime.Now;
        const diffTime = Math.abs(date2 - date1);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        console.log(diffTime + " milliseconds");
        console.log(diffDays + " days");
        if((diffDays/365) <=2){                //Might be need to change here, remove hardcoded here and calculate total number of days in current year.
            return true;
        }
        else return false;
    }


HTML: 

 <lightning-input    type="date" id="personDateOfBirth" label="DOB :" value={DateOfBirth} onchange={handleDOB}>
<lightning-input id="pastEmpRecordName" type="text" required="true" label="Field 1"></lightning-input>
<lightning-input if:true={ showFields } id="pastEmpRecordTitle" type="text" required="true" label="Field 2"></lightning-input>
<lightning-input if:true={ showFields } id="pastEmpRecordPhone" type="text" required="true" label="Field 3"></lightning-input>
 
ravi soniravi soni
Hi Amit,
try following dummy component. 
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="isHideField" type="boolean" default="true"/>
    <lightning:card>
        <lightning:input type="date" label="Date" onchange="{!c.changeDateHandler}"/>
        
        <lightning:layout>
            <lightning:layoutItem size="4">
        <lightning:input type="text" label = 'Field 1' name="field1"/>
        <lightning:input type="text" label = 'Field 2' name="field2"/>
            </lightning:layoutItem>
            <aura:if isTrue="{!v.isHideField}">
            <lightning:layoutItem size="4">
        <lightning:input type="text" label = 'Field 3' name="field3"/>
        <lightning:input type="text" label = 'Field 4' name="field4"/>
            </lightning:layoutItem>
            </aura:if>
            <lightning:layoutItem size="4">
        <lightning:input type="text" label = 'Field 5' name="field5"/>
        <lightning:input type="text" label = 'Field 6' name="field6"/>
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:card>
	
</aura:component>
  
({
	changeDateHandler : function(component, event, helper) {
        var selectedDate = event.getSource().get('v.value');
        console.log('selectedDate : ' + selectedDate);
        
        
        
        const date1 = new Date(selectedDate);
        const date2 = new Date();
          console.log('date1 : ' + date1);
          console.log('date2 : ' + date2);
        
        console.log("date1  : " + date1  +' ' +  typeof date1  );
        console.log("date2  : " + date2 +' ' +  typeof date2 );
        const diffTime = Math.abs(date2 - date1);
        var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
        console.log(diffTime + " milliseconds");
        console.log(diffDays + " days");
        var age = Math.floor(diffDays/365);
        console.log("age :" +age);
           if(age > 18){
        component.set("v.isHideField",false);    
        }
        else  {
            component.set("v.isHideField",true);    
        }
		
	}
})

let me know if it helps you and marking it as best.
Thank You
CharuDuttCharuDutt
Hii Amit Singh
Try The Below Code 
<aura:component>
    <aura:attribute name="FieldsToShow" type="boolean" default="true"/>
    <lightning:card>
       
    <lightning:recordEditForm aura:id="recordEditForm"
                           objectApiName="Contact">
        
        <lightning:inputField fieldName="Name" />
        
        <lightning:inputField fieldName="Birthdate" onchange="{!c.changeDate}" />
        <aura:if isTrue="{!v.FieldsToShow}">
          <lightning:inputField fieldName="Phone" />
        </aura:if>
        <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
    </lightning:recordEditForm>
    </lightning:card>
	
</aura:component>



CONTROLLER

({
	changeDate : function(component, event, helper) {
        var selectDate = event.getSource().get('v.value');
        
        console.log('selectedDate : ' + selectDate);
        
        
        
        
        const date1 = Number(selectDate.substring(0, 4));
        alert(date1);
        const date2 = new Date();
        var year = date2.getFullYear();
          
        var Age = year-date1;
        alert(Age);
        
        
           if(Age < 18){
        component.set("v.FieldsToShow",false);    
        }
        else if(Age > 18){
            component.set("v.FieldsToShow",true);    
        }
		
	}
})
Please Mark It As Best Answer If It Helps
Thank You!

 
This was selected as the best answer
IntroAmmyIntroAmmy
Thanks It works