[SalesForce] How to enter the seconds in lightning input date-time

I don't know how to enter seconds as well in the date-time field because of lightning input takes only hours and minutes 

<lightning:input type="datetime" name="input1" label="Enter a date/time value" />

enter image description here

Best Answer

There is no standard tag in lightning which takes seconds also. You will have to be creative and create you own tag.

Use combination of these -

Component Code: youComponent.cmp - Add this in your component 

<aura:attribute name="dateTime" type="String"/>
<aura:attribute name="seconds" type="Integer"/>
 <lightning:card title="Date/Time with seconds picker">
    <div class="slds-grid slds-m-around_small">
        <div class="slds-col"><lightning:input type="datetime" name="input1" label="Date/Time" value="{!v.dateTime}"/></div>
        <div class="slds-col"><lightning:input type="number" name="input1" label="Seconds" class="seconds" max="59" min="1" value="{!v.seconds}"/></div>
    </div>
    <aura:set attribute="footer">
        <!-- This button is to show the time with seconds, you do not need to have this, as you will have you own events-->
        <lightning:button label="Show Time" onclick="{!c.showTime}"/>
    </aura:set>
</lightning:card>

Controller.js - to get the final Date with seconds

showTime : function(component, event, helper){
    var dateTime = component.get("v.dateTime");
    var seconds = component.get("v.seconds");

    var d = new Date(dateTime);

    var finalDate = new Date(d.getFullYear(), d.getMonth() , d.getDate() , d.getHours() , d.getMinutes() , seconds , 0);

    //convert the finalDate to ISOString as salesforce returns the same from DateTime component.
    console.log("New Data = " + finalDate.toISOString());
}

Hope this will help.

Related Topic