Lightning

Time Selection Component | Input Time in Lightning

cafeforce
cafeforce 1k Views Add a Comment
custom-time-lightning-cafeforce

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.

Contents
Component Features:To get started, Create the TimeSelection Lightning Component.Now we will call the 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.

TimeSelection.cmp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header -->
 
<aura:component >
 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 
    <aura:attribute name="value"         type="string" default="0" />
    <aura:attribute name="formattedValue" type="string" default="" />
<aura:attribute name="selectedHour" type="string" default="" access="private" />
    <aura:attribute name="selectedMinute" type="String"   default="" access="private" />
    <aura:attribute name="selectedMeridiem" type="String"   default="" access="private" />
    <aura:attribute name="timeHourList"     type="List"     access="private" default="[]" />
    <aura:attribute name="timeMinuteList"   type="List"     access="private" default="[]" />
    <aura:attribute name="timeAMPM"         type="List"     access="private" default="[{'label': 'AM', 'value': 'AM'},
                                                                                        {'label': 'PM', 'value': 'PM'}]" />
    
    <div>
     <div class="timePickerBox">
            <lightning:combobox class="timePick timePickerBox1" onchange="{!c.handleTimeChange}" value="{!v.selectedHour}" placeholder="00" options="{!v.timeHourList}" name="progress" variant="label-hidden" />
            <p class="timePick timePickerBox2"><b>:</b></p>
            <lightning:combobox class="timePick timePickerBox3" onchange="{!c.handleTimeChange}" value="{!v.selectedMinute}" placeholder="00" options="{!v.timeMinuteList}" name="progress" variant="label-hidden" />
            <lightning:combobox class="timePick timePickerBox4" onchange="{!c.handleTimeChange}" value="{!v.selectedMeridiem}" placeholder="AM" options="{!v.timeAMPM}" name="progress" variant="label-hidden" />
        </div>
    </div>
</aura:component>
 
<!--
    Code by CafeForce
    Website: http://www.cafeforce.com
    DO NOT REMOVE THIS HEADER/FOOTER FOR FREE CODE USAGE
-->
 

 

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

TimeSelectionController.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
/* Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header */
 
({
doInit : function(component, event, helper) {
var hourList = [];
        var minuteList = [];
        for(var i = 0; i <= 59; i++) {
            var x = (i + '').length == 1 ? ('0' + i) : i;
            if(x > 0 && x <= 12)
hourList.push({ 'label':x, 'value':x.toString() });
if((Number(x) % 15) == 0)
             minuteList.push({ 'label':x, 'value':x.toString() });
        }
        component.set("v.timeHourList",hourList);
component.set("v.timeMinuteList",minuteList);
 
        var value = component.get('v.value');
        if(!$A.util.isEmpty(value)) {
var convertedTime = value/3600000;
var hour = convertedTime.toString().split('.')[0];
 
if(hour == 0) {
hour = 12;
component.set("v.selectedMeridiem", 'AM');
} else if(hour < 12) {
component.set("v.selectedMeridiem", 'AM');
} else if(hour == 12) {
component.set("v.selectedMeridiem", 'PM');
} else {
hour = Number(hour) - 12;
component.set("v.selectedMeridiem", 'PM');
}
 
            var minute = $A.util.isEmpty(convertedTime.toString().split('.')[1]) ? '00' : (Number(convertedTime.toString().split('.')[1]) * 60 ) / 100;
component.set("v.selectedHour",(hour.toString().length == 1) ? '0' + hour : hour.toString());
            component.set('v.selectedMinute', (minute.toString().length == 1) ? minute + '0' : minute.toString());
        }
},
 
handleTimeChange : function(component, event, helper) {
var formattedValue;
var hour = component.get("v.selectedHour");
var minute = component.get("v.selectedMinute");
 
if(component.get("v.selectedMeridiem") == 'PM') {
if(hour != 12)
hour = Number(hour) + 12;
} else {
if(hour == 12)
hour = 0;
}
var timeForm = Number(hour) +'.'+ (Number(minute) / 0.6);
var timeForm2 = Number(timeForm)*3600000;
formattedValue = hour + ':' + minute + ':00';
component.set('v.value', timeForm2);
component.set('v.formattedValue', formattedValue);
},
})
 
/*
    Code by CafeForce
    Website: http://www.cafeforce.com
    DO NOT REMOVE THIS HEADER/FOOTER FOR FREE CODE USAGE
*/
 

 

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

TimeSelection.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
.THIS .timePickerBox {
    width: 240px;
    background: #fff;
    display: inline-block;
    border-radius: 0.3rem;
    border: 1px solid rgb(217, 219, 221);;
}
.THIS .timePickerBox .timePick {
    float: left;
}
.THIS .timePickerBox .timePickerBox1 {
    width: 32%;
}
.THIS .timePickerBox .timePickerBox1 .slds-scope input:focus {
    border-right: none;
}
.THIS .timePickerBox .timePickerBox2 {
    width: 2%;
    line-height: 2.3rem;
}
.THIS .timePickerBox .timePickerBox3 {
    width: 32%;
    border-right: 1px solid rgb(217, 219, 221);;
}
.THIS .timePickerBox .timePickerBox4 {
    width: 34%;
}
.THIS .timePickerBox .timePick input {
    border: none;
    line-height: 36px !important;
}
.THIS .timePickerBox .slds-dropdown {
    max-width: 80px;
    min-width: 80px;
}
.THIS .timePickerBox .slds-listbox_vertical .slds-listbox__option_plain {
    padding: .2rem 0rem;
}
.THIS .timePick input:focus {
    box-shadow: none !important;
}
.THIS .timePickerBox:hover {
    border-color: rgb(21, 137, 238);
    box-shadow: 0 0 2px #0070d2;
}
 
/* For Scrolling */
.THIS ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.THIS ::-webkit-scrollbar-track {
   display: none !important;
}
.THIS ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
}
 

 

Now we will call the component.

Test.app
1
2
3
4
5
6
 
<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header -->
<aura:application extends="force:slds">
    <c:TimeSelection value="0"></c:TimeSelection>
</aura:application>
 

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:

Multi-Select Combobox in Lightning Salesforce

For any queries or suggestions, comment below.

Cheers … Happy Coding … 🙂

TAGGED:
Share This Article
Leave a comment
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Lost your password?