I've aura iteration in my Aura Component where I have a start date and End date and I want to calculate the difference between Start and End date for each row in Aura iteration.

What options I have for that? I want to know my options to calculate the time difference between start time and end time in each row.

Child Component:

<aura:component >
    <aura:attribute name="isReadOnly" type="boolean" default="false"/>
    <aura:attribute name="durationProgram" type="Custom_Data__c" />
    <aura:attribute name="rowIndex" type="String"/>
    <!-- Register 2 Lightning Event for handle add or Delete rows on Parent Component  --> 
    <aura:registerEvent name="DeleteRowEvt" type="c:DeleteRowEvt"/> 
    <aura:registerEvent name="AddRowEvt" type="c:AddNewRowEvt"/> 
        <td class="slds-col slds-size_1-of-12">
            {!v.rowIndex + 1}
        <td class="slds-col slds-size_2-of-12">
            <lightning:input type="time"  name="Start_Time" value="{!v.durationProgram.Start_Time__c}" readonly="{!v.isReadOnly}"/>  
        <td class="slds-col slds-size_2-of-12">
            <lightning:input type="time" name="End_Time" value="{!v.durationProgram.End_Time__c}" readonly="{!v.isReadOnly}"/>
        <td class="slds-col slds-size_2-of-12">
            {!v.durationProgram.End_Time__c} - {!v.durationProgram.Start_Time__c}
            <aura:if isTrue="{!v.rowIndex == 0}">
                <a onclick="{!c.AddNewRow}">
                    <lightning:icon iconName="utility:add" class="slds-icon slds-icon_small" size="small" alternativeText="add"/>
                    <span class="slds-assistive-text">Add Icon</span>
                <aura:set attribute="else">
                    <a onclick="{!c.removeRow}">
                        <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/>
                        <span class="slds-assistive-text">Delete Icon</span>

Child Controller:

    AddNewRow : function(component, event, helper){
       // fire the AddNewRowEvt Lightning Event 
    removeRow : function(component, event, helper){
     // fire the DeleteRowEvt Lightning Event and pass the deleted Row Index to Event parameter/attribute
       component.getEvent("DeleteRowEvt").setParams({"indexVar" : component.get("v.rowIndex") }).fire();

Parent Component:

<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
                    <td class="slds-col slds-size_1-of-12">
                        S. No.
                    <td class="slds-col slds-size_2-of-12">
                        Start Time
                    <td class="slds-col slds-size_2-of-12">
                        End Time
                    <td class="slds-col slds-size_2-of-12">
                <aura:iteration items="{!v.Custom_Data_List}" var="item" indexVar="index">
                    <c:ChildComponentTable durationProgram="{!item}" rowIndex="{!index}" isReadOnly="{!v.isReadOnly}"/>
  • 2
    I presume that {!v.durationProgram.End_Time__c} - {!v.durationProgram.Start_Time__c} was your attempt to find the difference in times?
    – sfdcfox
    Oct 18, 2020 at 0:39
  • Yes, I'm trying to find the difference in UI using that. but it seems I need to do it in the controller. But I'm not sure about the approach
    – sfdc
    Oct 18, 2020 at 19:20

1 Answer 1


I would think in the child component you need to add a new doInit method to calculate this for you, an attribute to hold the value, and update the table to reference the attribute. . I didn't type this in Salesforce to verify so things will need to be changed, but I think this approach should work. I don't believe any changes are needed in the parent component with this solution.

Child component:

Add an attribute for tracking the difference

<aura:attribute name="Difference" type="Double" default="false"/>

Could be integer or Date depending how you want to show it.

doInit Handler:

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

Update table:

<td class="slds-col slds-size_2-of-12">

Child Controller: (Add a method for do init)

doInit : function(component, event, helper){
    var durationProgram = component.get("v.durationProgram");
    var StartTime = Start_Time__c;
    var End_Time  = End_Time__c;
    var StartTime = new Date(durationProgram.Start_Time__c), 
    var End_Time = new Date(durationProgram.End_Time__c)
    var days = (End_Time - StartTime ) / 8.64e7; 
    // I used days but you can change it to what matches your needs. 
    component.set("v.Difference", days); 

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.