When you provide a timestamp or JavaScript Date object, lightning:relativeDateTime displays a string that describes the relative time between the current time and the provided time.

Sample code:


Component:

1. <aura:component implements = “force:appHostable”>  
2.       
3.     <aura:attribute name=“pastDay” type=“Object”/>  
4.     <aura:attribute name=“today9AM” type=“Object”/>  
5.     <aura:attribute name=“now” type=“Object”/>  
6.     <aura:attribute name=“futureday” type=“Object”/>  
7.     <aura:handler name=“init” value=“{! this }” action=“{! c.init }” />      
8.       
9.     <div class=“slds-box slds-theme_default”>   
10.   
11.         <div class=“slds-m-vertical_small”>  
12.             Past Date:  
13.             <strong><lightning:relativeDateTime value=“{! v.pastDay }”/></strong>  
14.         </div>  
15.       
16.         <div class=“slds-m-vertical_small”>  
17.             Today 9:00 AM:  
18.             <strong><lightning:relativeDateTime value=“{! v.today9AM }”/></strong>  
19.         </div>  
20.       
21.         <div class=“slds-m-vertical_small”>  
22.             Right now:  
23.             <strong><lightning:relativeDateTime value=“{! v.now }”/></strong>  
24.         </div>  
25.       
26.         <div class=“slds-m-vertical_small”>  
27.             Future Date:  
28.             <strong><lightning:relativeDateTime value=“{! v.futureday }”/></strong>  
29.         </div>     
30.           
31.     </div>   
32.       
33. </aura:component>  

Component Controller:

1. ({  
2.       
3.     init: function (cmp) {  
4.           
5.         var today = new Date();  
6.         cmp.set( ‘v.pastDay’, new Date( ‘1999-02-01’ ) );  
7.         cmp.set( ‘v.today9AM’, new Date().setHours( 9,0,0,0 ) );  
8.         cmp.set( ‘v.now’, Date.now() );  
9.         cmp.set( ‘v.futureday’, new Date( today.getFullYear() + 15, today.getMonth(), today.getDate() ) );  
10.           
11.     }     
12.       
13. })  

Output: