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"/>
<tr>
<td class="slds-col slds-size_1-of-12">
{!v.rowIndex + 1}
</td>
<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>
<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>
<td class="slds-col slds-size_2-of-12">
{!v.durationProgram.End_Time__c} - {!v.durationProgram.Start_Time__c}
</td>
<td>
<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>
</a>
<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>
</a>
</aura:set>
</aura:if>
</td>
</tr>
</aura:component>
Child Controller:
({
AddNewRow : function(component, event, helper){
// fire the AddNewRowEvt Lightning Event
component.getEvent("AddRowEvt").fire();
},
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">
<thead>
<tr>
<td class="slds-col slds-size_1-of-12">
S. No.
</td>
<td class="slds-col slds-size_2-of-12">
Start Time
</td>
<td class="slds-col slds-size_2-of-12">
End Time
</td>
<td class="slds-col slds-size_2-of-12">
Difference
</td>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.Custom_Data_List}" var="item" indexVar="index">
<c:ChildComponentTable durationProgram="{!item}" rowIndex="{!index}" isReadOnly="{!v.isReadOnly}"/>
</aura:iteration>
</tbody>
</table>
{!v.durationProgram.End_Time__c} - {!v.durationProgram.Start_Time__c}
was your attempt to find the difference in times?