0

I have two time inputs for start and end times:

<lightning:input type="time" name="startTime" label="Start Time" min="05:30:00.000Z" max="19:00:00.000Z" value="{!v.selectedStart}" onchange="{!c.setEnd}"/>

<lightning:input type="time" name="endTime" label="End Time"  min="05:30:00.000Z" max="19:00:00.000Z" value="{!v.selectedEnd}"/>

If a time is selected in the first field, I need to default the end time in the second. It seems the start time is stored as a string like "05:45:00.000". After a bit of research, I attempted to simply cut up the string and add values to make an end string like "06:15:00.000". However, that literal value was displaying to the user in the picklist instead of "6:15 AM".

Next, I tried to have the controller set values like "6:15 AM". The below code works, but generates an error when trying to save the values via apex into a Time field.

Cannot deserialize instance of time from VALUE_STRING value 12:45 PM 
or request may be missing a required field

JS controller:

setEnd : function(component, event, helper){
    var startTime = component.get("v.selectedStart");

    var startString = startTime.split(":");
    var startHr = parseInt(startString[0]);
    var startMin = parseInt(startString[1]);
    var endHr = startHr;
    var endMin = startMin;
    endMin = startMin + 30;
    //below avoids values like 05:75...
    if(endMin >= 60){
        endHr++;
        endMin = ((endMin / 60) -1) * 60;
        if(endMin < 10){
            endMin = "0"+endMin;
        }
    }
    if(endHr >= 13){
        endHr = endHr - 12;
    }
    var endSuffix = endHr < 12 ? " AM" : " PM";
    component.set("v.selectedEnd", endHr +":"+ endMin + endSuffix);
    //above sets picklist to values like "6:15 AM", but won't save
},

Perhaps the time values work like a option, where there's both a label and a value? How can I get the input to show the user "6:15 AM", but save a database format? (I assume the latter is "06:15:00.000")

1 Answer 1

1

Found the solution: The lightning:input type="time" fields store their value as a 24 hour clock with a "Z" on the end. IE:

"18:30:00.000Z"

or

"06:30:00.000Z"

You must ensure to add a leading zero if less than 10 hours, and include the Z. The controller will take incorrect formats like "6:00 AM", but will error when serializing and saving.

If you set the value with the correct backend format, as noted above, the UI will display the user-friendly value with "AM" and whatnot.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .