Time Selection Component | Input Time in Lightning

Suyash N
Suyash N 760 Views Add a Comment

Salesforce Input Time datatype is difficult to use. Even if you are passing that value to the Lightning input time component, it doesn’t format the time to date. Also, updating your value in lightning time doesn’t format it properly for the SF record. To solve this issue, you can use this component.

The main advantage of this component is you just need to pass the value to it and it will format and show. On changing the hour/minute, you get the value instantly.

The main drawback of SF Time is that it is difficult to show the exact time. Instead, it shows time in 15 minutes gap. Example – 8:15, 8:30, 8:45.

Component Features:
  • Single unit component
  • Separate Picklist for Hour, Minute and Meridiem
  • Prepopulate Value Feature
  • Get updated value instantly after changing the hour or minute.
  • Dual way to get value, either in SF time format or Formatted Time format.

To get started, Create the TimeSelection Lightning Component.

For creating a new Lightning Component, go to dev. console > File > New > Lightning Component.

Open the TimeSelection.cmp file and paste the below code.


Now open the controller file TimeSelectionController.js and paste the below code.


Finally, paste the CSS in the TimeSelection.css file.


Now we will call the component.

Our component is now ready to use. You can call this component in any Parent component and just need to pass the salesforce Time datatype value to it. To get the updated value, you can either use the value attribute or formattedValue attribute.

value attribute will give you the same SF format value.

formattedValue attribute will give you the formatted Time Value like 08:45:00.


Also Check:

For any queries or suggestions, comment below.

Cheers … Happy Coding … 🙂

Share This Article
Leave a comment
Notify of
Inline Feedbacks
View all comments