lightning:input time display

Question

I am using a <lightning:input type="time"/> component and the picker is displayed to the user in 12 hour time with an AM/PM picker.

I want to display this value to the user in a table and the value is stored as a 24 hour string. Is there a component I can use to display this in 12 hour format, or do I need to parse out the time and manipulate it myself to display it in the 12 hour format?

Input:

<lightning:layoutItem size="6">
    <lightning:input type="time" label="Start Time" name="start" value="{!v.startTime}" required="true" aura:id="required"/>
</lightning:layoutItem>
<lightning:layoutItem size="6">
    <lightning:input type="time" label="End Time" name="end" value="{!v.endTime}" required="true" aura:id="required"/>
</lightning:layoutItem>

Output:

<tr>
    <td class="slds-text-body_small">{!v.appointment.startTime}</td>
    <td class="slds-text-body_small">{!v.appointment.endTime}</td>
</tr>

Answer 1

There is no such OOTB component (that I know of) to display the data as you want, and I have gone through a big chunk of the referenced components under the Component Reference Guide.

That being said, you will have to create your own custom component to display the time selection as you mention.

Answer 2

The time picker to pick a time or provide an ISO8601 formatted time string in the value attribute, Please read doc of time input. It gives 24h format time for example if you select 10:30 PM output should be 22:30:00.000 HH:MM:ss.

For your case, you need to write logic that converts 24h to 12h to display time into the table, the following is the Js function.

 function tConvert (time) {
   // Check correct time format and split into components
   time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

    if (time.length > 1) { // If time format correct
      time = time.slice (1);  // Remove full string match value
      time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
      time[0] = +time[0] % 12 || 12; // Adjust hours
    }
    return time.join (''); // return adjusted time or original string
  }

call this function like tConvert('22:30:00') you got output is 10:30:00PM