function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Kalpesh.GandhiKalpesh.Gandhi 

Lightning Component: ui:inputDate not working properly inside aura:iteration


I am trying to use the ui:inputdate inside the aura:iterator which binds the data from a wrapper.When I am selecting the date, I am getting the date at back end but date is not displayed on the UI.
When I use the ui:inputdate without using wrapper I am able to see the date as well as I get the date at backend.
But my requirement is to get it with wrapper.

 

Here's my code:

MyContactList.cmp:

<aura:component access="global" controller="ldapp.LightningContactController">
<aura:attribute name="cons" type="contact[]" />
<aura:attribute name="contacts" type="ldapp.contactWrapper[]" />
<aura:handler name="init" action="{!c.myAction}" value="{!this}" />
<ul>
    <table>
        <tr>
            <th class="setWidth">Name</th> 
            <th class="setWidth">Birthdate</th>
            <th class="setWidth">Account Name</th>
        </tr>   
        <aura:iteration items="{!v.contacts}" var="contact">
            <tr> 
                <td class="setWidth">{!contact.objCon.Name}</td> 
                <td class="setWidth">

                    <!--<force:inputField aura:id="expdate" class="slds-input" value="{!contact.objCon.Birthdate}"/>-->
                    <ui:inputDate value="{!contact.objCon.Birthdate}" class="aaa" displayDatePicker="true"/>
                </td>
                <td class="setWidth">{!contact.objCon.Account.Name}</td>
            </tr>
        </aura:iteration>
    </table>
</ul> 
</aura:component>
MyContactListController.js:

({
    myAction : function(component, event, helper) {
        var action = component.get("c.getAllContacts");
        action.setCallback(this, function(data) {
            component.set("v.contacts", data.getReturnValue());
        });
        $A.enqueueAction(action);
    },

    dateOnSelect : function(component, event, helper) {}
})
App:

<aura:application >
    <c:MyContactList /> 
</aura:application>
Apex Controller:

public class LightningContactController {
    @AuraEnabled
    public static List<Contact> getContacts() {
        return [Select Id, Name, Birthdate, AccountId, Account.Name, Email, Title, Phone 
                From Contact order by LastModifiedDate desc
                limit 10];
    }

    @AuraEnabled
    public static list<contactWrapper> getAllContacts(){
        list<contactWrapper> lstC = new list<contactWrapper>();
        for(Contact objC : [Select Id, Name, Birthdate, AccountId, Account.Name, Email, Title, Phone From Contact])
        {
            lstC.add(new contactWrapper(true,objC));
        }
        return lstC;
    }

    public class contactWrapper {
        @AuraEnabled
        public boolean blnActive;
        @AuraEnabled
        public Contact objCon;

        public contactWrapper(boolean blnA, Contact objC){
            blnActive = blnA;
            objCon= objC;
        }
    }
}
Many Thanks, kalpesh