Change Date Format inside label

Question

I want to edit the date format inside the label from YYYY-MM-DD to MM/DD/YYYY

<ui:inputSelectOption text="{!event.Id}" label="{!event.Name + ' - ' + event.Event_Start_Date__c}" class="eventList" />

Is there any way to do this while still keeping it inline with the event name?

EDIT: Added my controller

@AuraEnabled
public static List<Event__c> getEvents() {
return [Select Id, Name, Event_Start_Date__c From Event__c order by Id desc LIMIT 5];
}

Answer 1

Assuming you are getting Event_Start_Date__c from Apex controller using enqueaction and you are open to modify the Event_Start_Date__c in your js controller, you can try the following code:

I looked at some examples on how to transform the date to mm/dd/yyyy format using JS and applied the same idea here (I have used createddate, you can change the code to accommodate Event_Start_Date__c) :

https://stackoverflow.com/questions/11591854/format-date-to-mm-dd-yyyy-in-javascript

 if (state === "SUCCESS") {
                var tempholder= [];
                var Items = response.getReturnValue();
                for(var i=0;i< Items.length;i++){
                    var dateval = Items[i].CreatedDate.slice(0, 10).split('-');
                    Items[i].CreatedDate =  dateval[1] +'/'+ dateval[2] +'/' + dateval[0];
                    tempholder.push(Items[i]);
                }
                component.set("v.contacts", tempholder); 
            }

OUTPUT: