Lightning Component to show Date, Time and Greeting

 Lightning Aura Component that shows current Date and Time with Greeting.

Screenshot: -

Component: -

ViewDateTimeAndGreeting.cmp

1. <aura:component implements="flexipage:availableForAllPageTypes">
2. <aura:handler name="init" value="{!this}" action="{!c.handleTime}" />
3.     
4.     <aura:attribute name="hour" type="Integer" />
5.     <aura:attribute name="minute" type="Integer" />
6.     <aura:attribute name="period" type="String" />
7.     <aura:attribute name="day" type="String" />
8.     <aura:attribute name="date" type="Integer" />
9.     <aura:attribute name="month" type="String" />
10.     <aura:attribute name="year" type="String" />
11.     
12.     <aura:attribute name="greet" type="String" default="Hello !" />
13.     
14.     <aura:attribute name="currentUser" type="User"/> 
15.     <force:recordData aura:id="recordLoader" recordId="{!$SObjectType.CurrentUser.Id}" fields="Name" targetFields="{!v.currentUser}"/>
16.     
17.     <div class="slds-card slds-p-around_xx-small main-container">
18.         <div class="slds-grid">
19.             <div class="slds-col slds-size_1-of-5">
20.                 <lightning:icon iconName="utility:clock" variant="inverse" size="small" alternativeText="Time"/>
21.             </div>
22.             <div class="slds-col slds-size_4-of-5 slds-text-heading_large slds-text-align_center">
23.                 <div>{!v.hour} : {!v.minute}&nbsp;{!v.period}</div>
24.                 <div>{!v.greet}, {!v.currentUser.Name}</div>
25.             </div>
26.         </div>
27.         
28.         <div class="slds-card slds-p-around_xx-small slds-m-top_x-small date-container">
29.             <div class="slds-grid">
30.                 <div class="slds-col slds-size_1-of-5">
31.                     <lightning:icon iconName="utility:event" variant="inverse" size="small" alternativeText="Date"/>
32.                 </div>
33.                 <div class="slds-col slds-size_4-of-5 slds-text-align_center">
34.                     <div class="slds-text-heading_small">{!v.day}, {!v.date} {!v.month}&nbsp;{!v.year}</div>
35.                 </div>
36.             </div>
37.         </div>
38.     </div>
39. </aura:component>

ViewDateTimeAndGreeting.js (Controller)

1. ({
2. handleTime : function(component, event, helper) {
3.         var today = new Date();
4.         var hour = today.getHours();
5.         var period = hour >= 12 ? 'PM' : 'AM';
6.         
7.         helper.setGreet(component,hour);
8.         
9.         if (hour > 12) {
10.             hour -= 12;
11.         } else if (hour === 0) {
12.            hour = 12;
13.         }
14.         
15.         var minute = today.getMinutes();
16.         minute = helper.checkDigit(minute); //will check if minute is single digit then add '0' before it
17.         
18.         var date = today.getDate();
19.         
20.         var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
21.         var dayName = days[today.getDay()];
22.         
23.         var month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
24.         var monthName = month[today.getMonth()];
25.         
26.         var year = today.getFullYear();
27.         
28.         component.set("v.hour", hour);
29.         component.set("v.minute", minute);
30.         component.set("v.period", period);
31.         component.set("v.day", dayName);
32.         component.set("v.date", date);
33.         component.set("v.month", monthName);
34.         component.set("v.year", year);
35. },
36. })

ViewDateTimeAndGreeting.js (Helper)

1. ({
2. checkDigit : function(minute) {
3.         if (minute < 10) {minute = "0" + minute};  // add zero in front of single digit minute
4.     return minute;
5.     },
6.     
7.     setGreet : function(component,hour) {
8.         if (hour <= 11) {
9.             component.set("v.greet", "Good morning");
10.         } else if (hour >= 12 && hour <= 15) {
11.             component.set("v.greet", "Good afternoon");
12.         } else if (hour == 20 && hour < 21) {
13.         component.set("v.greet", "It's time to go home");
14.         } else {
15.         component.set("v.greet", "Good evening");
16.         }
17.     },
18. })

ViewDateTimeAndGreeting.css

1. .THIS.main-container{
2.     background-color : #3498DB;
3.     color : #fff;
4. }
5. .THIS .date-container{
6.     background-color : #5DADE2;
7.     color : #fff;
8. }