To understand how to format dates, let's copy the following code files into a new Lightning app (create a Lightning app bundle by using the Developer Console, and name it DateFormatterApp):

• DateformatterApp.app

<aura:application extends="force:slds">
  <aura:attribute name="DateTimeInput" type="DateTime" />
  <aura:attribute name="output" type="DateTime" />
    
      <Lightning:input type="datetime-local" label="Input Date" name="date" value="{!v.DateTimeInput}"/>
    
      <Lightning:select aura:id="select" name="select" label="Select a pie" onchange="{! c.onChange }">
        <option value="">choose one...</option>
        <option value="YYYY MM DD">YYYY MM DD format</option>
        <option value="MMMM DD YYYY, hh:mm:ss a">MMMM DD YYYY, hh:mm:ss a format</option>
        <option value="yyyy-MM-dd HH:mm:ss.SSS">yyyy-MM-dd HH:mm:ss.SSS format</option>
    </Lightning:select>
    
     <p>outputDate {!v.output}</p>
</aura:application>

• The controller code is as follows:

({
  onChange : function(component, event, helper) {
    console.log(component.get("v.DateTimeInput"));
        var dateInput = component.get("v.DateTimeInput")
        var selectedformat = component.find('select').get('v.value') ;
        var output = $A.localizationService.formatDate(dateInput,selectedformat);
        component.set("v.output",output);
  }
})

The output component's preview will look as follows:

Notice that we used the formatDate function of localizationService to format the date and time. Also, notice that we used lighting:select to create a picklist selector and its onChange event and finds function to get the values.