2

As title says, How do I assign dynamic Ids for ui:inputDate elements inside aura:iteration?

Here is the reproducible version of the problem I am facing:

HelloWorldApp.app

<aura:application >
    <c:inputDateExample />
</aura:application>

inputDateExample.cmp

<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="datesList" type="List" />
    <table>
        <aura:iteration items="{!v.datesList}" var="dateItem">
            <tr>
                <ui:inputDate aura:id="date-id" 
                              value="{!dateItem}" 
                              displayDatePicker="true"
                              blur="{!c.fldChanged}"/>
            </tr>
        </aura:iteration>
    </table>
</aura:component>

inputDateExampleController.js

({
    fldChanged : function(component, event, helper) {
        console.log('Value changed');
        //How do I find from which date element, event is fired??
        //The below method finds both date elements because the Id is not unique
        var dateComponent = component.find('date-id');
        console.log(dateComponent);
        console.log(dateComponent[0].get("v.value"));
    },
    doInit : function(component,event,helper){
        var datesArray = [];
        datesArray.push("2017-01-01");
        datesArray.push("2017-01-31");
        component.set("v.datesList",datesArray);
    }
})

This produces the below output and I need to find which element user is clicking on??

enter image description here

Notes:

  1. I can assign unique Id for tr element but not sure how to use that inside component.find() method.
  2. I can assign dynamic id for plain input tags but there is too much markup involved for making these similar to lightning date element.
  3. I tried giving html5 data attributes for ui:inputDate but it doesn' accept.

Any workarounds or anything I am missing here?

5

You need to use event.getSource() to access the actual ui:inputDate component instance that fired the blur event.

fldChanged method should look like below:

fldChanged : function(component, event, helper) {
    console.log('Value changed');
    // instance of the ui:inputDate which triggered the event
    var dateComponent = event.getSource(); 
    console.log(dateComponent);
    console.log(dateComponent.get("v.value"));
},

And to dynamically set aura:id to any component, you need to dynamically create them using $A.createComponent()

2
  • Can you please look at my other question when you get a chance? As suggested in your answer, I am trying to create component dynamically to give unique aura:Id attribute but running into some problem. Here is the link : salesforce.stackexchange.com/questions/154212/… Thanks in Advance!
    – javanoob
    Jan 2 '17 at 3:15
  • 1
    @javanoob I believe there's no need to create inputDate with dynamic aura:id . You need compartmentalize the your component. BTW Mohit has answered your question please check it out.
    – Praveen
    Jan 2 '17 at 6:09
3

I Am not sure to assign dynamic Ids for ui:inputDate elements inside aura:iteration.I have Workaround another method You can Know Which Date User Clicked On and which Element is Clicked .

Component 1:testfordate

<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="datesList" type="List" />
    <table>
        <aura:iteration items="{!v.datesList}" var="dateItem" indexVar="indx">
            <tr>
                <c:testfordate2 SelectedId="{!indx}" date="{!dateItem}"/>
            </tr>
        </aura:iteration>
    </table>
</aura:component>

Component 1: Controller

({

    doInit : function(component,event,helper){
        var datesArray = [];
        datesArray.push("2017-01-01");
        datesArray.push("2017-01-31");
        component.set("v.datesList",datesArray);
    }
})

Component 2:testfordate2

<aura:component >
    <aura:attribute name="SelectedId" type="String"  />
     <aura:attribute name="date" type="Date"  />
             <ui:inputDate aura:id="date-id" 
                              value="{!v.date}" 
                              displayDatePicker="true"
                              blur="{!c.fldChanged}"/>
</aura:component>

Component 2:Controller

    ({
          fldChanged : function(component, event, helper) {
            console.log('Value changed');
              var selectedid = component.get("v.SelectedId");
              console.log("user clicked",selectedid + 1 );
            var dateComponent = component.find('date-id');
            console.log(dateComponent);
            console.log(dateComponent.get("v.value"));       
 }
    })

enter image description here

1
  • Looks like we can give dynamic id for "aura:id", if we create components dynamically. Which one do you recommend in this case: creating components dynamically or your above mentioned approach? Pls suggest. Thanks!
    – javanoob
    Dec 29 '16 at 6:55

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.